將json數據拆分爲3個列表 - jquery/javascript

Question

我有json數據 我已經把第一組數據寫入了一個ul。 我想將剩餘的數據分成2個相同的塊並寫入其他兩個uls。

如何在初始索引== 0之後分割剩餘的json？

我js代碼：

$("#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 

電流輸出：

<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> 

我的期望的輸出是到所述第一項仍然分配給該storeListLeft，然後分割剩餘的數據和分配組塊，以2分開uls

所以這樣的事情：

<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

第一循環之前打破美國成你想要的對象：

//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); 

這裏是生成的函數標記：

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); 
} 

並調用函數：

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

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

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

Answer 2

您是否在尋找模數運算符？

if(index % 2 == 0) { 
    list = $('.storeListLeft'); 
} else { 
    list = $('.storeListRight'); 
} 

即使索引將返回0，奇數指標將返回1