Question

I have json data
I’ve taken the first set of data and written it to one ul.
I want to split the remaining data into 2 equal chunks and write to two other uls.

How do I split the remaining json after the initial index == 0?

my js code:

$("#storeList").append('<ul class="storeListLeft"></ul>');
    $("#storeList").append('<ul class="storeListRight"></ul>');

    //run store json data and append to storeList div
                                var object;
                                $.getJSON('xml/storeList.json', function(json) {
                                    object = json;
                                    $.each(object.storeList.state, function(index, value) {
                                    var list;
                                        if(index == 0) {
                                          list = $('.storeListLeft');
                                        } else {
                                          list = $('.storeListRight');
                                        }

                                            listItem = $('<li/>'),
                                            html = listItem.append($('<h3/>').text(this.stateName));

                                        $.each(this.store, function() {
                                            listItem.append($('<a />').attr('href', this.storeURL).attr('class', 'storeInactive').attr('id', this.storeID).text(this.storeName));
                                        });

                                        list.append(html)

                                    });
                                }); //end json render

CUrrent output:

<ul class="storeListLeft">
   <li>
       <h3>state Name</h3>
       <a>store Name</a>
   </li>
</ul>
<ul class="storeListRight">
   <li>
       <h3>state Name</h3>
       <a>store Name</a>
       <a>store Name</a>
       <a>store Name</a>
   </li>
    <li>
       <h3>state Name</h3>
       <a>store Name</a>
   </li>
</ul>

my desired output is to still assign the first item to the storeListLeft, and then split the remaining data and assign the chunks to 2 separate uls

so something like this:

<ul class="storeList_1"> //which is index == 0
   <li>
       <h3>state Name</h3>
       <a>store Name</a>
   </li>
</ul>
<ul class="storeList_2"> //2 & 3 are the split of the remainder after index == 0 
   <li>
       <h3>state Name</h3>
       <a>store Name</a>
       <a>store Name</a>
       <a>store Name</a>
   </li>
    <li>
       <h3>state Name</h3>
       <a>store Name</a>
   </li>
</ul>
<ul class="storeList_3">
   <li>
       <h3>state Name</h3>
       <a>store Name</a>
       <a>store Name</a>
       <a>store Name</a>
   </li>
    <li>
       <h3>state Name</h3>
       <a>store Name</a>
   </li>
</ul>

Answer 1

Before the first loop break the states into the objects you want:

//get the first state element in the array
var firstStateArray = object.storeList.state.slice(0, 1);

//get the half way point of the states
var mid = Math.round((object.storeList.state.length - 1) / 2);

//assign the first half of the array, starting at the second item (1) to the middle (mid)
var secondStateArray = object.storeList.state.slice(1, mid);

//assign the second half of the array but starting after the first half
var thirdStateArray = object.storeList.state.slice(mid + 1);

Here is a function to generate the markup:

function GenerateMarkup(states, className) {
    var html = "<ul class='" + className + "'>";

    $.each(states, function () {

        html += "<li>";

        html += "<h3>" + this.stateName + "</h3>";

        $.each(this.store, function (index, value) {
            html += "<a href='" + this.storeURL + "' class='storeInactive' id='" + this.storeID + "'>" + this.storeName + "</a>";
        });

        html += "</li>";

    });

    html += "</ul>";

    $("#storeList").append(html);
}

And calling the function:

//create first list...only one state
GenerateMarkup(firstStateArray, "storeList_1");

//create second list
GenerateMarkup(secondStateArray, "storeList_2");

//create third list
GenerateMarkup(thirdStateArray, "storeList_3");