jQuery JSON根據數組集數量追加ul

我希望jQuery爲每組產品創建新的ul。每個ul內部，每套的所有項目將被追加。結果出乎意料;應該只有2個ul，但附加了。jQuery JSON根據數組集數量追加ul

我的jQuery

$.getJSON('/products.json', function (result) { 
    var booksobj = result.ebooks.basic; 

    /* EBOOKS*/ 
    $.each(booksobj.set, function(i, item) { 
     $('#ebook').append('<ul>'); // Append new list sets 
     $('#ebook ul').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>'); 
    }); 
});

products.json

{ 
    "ebooks": { 
     "basic": { 
      "set": [ 
       { 
        "title": "PDF Sample", 
        "product_id": 1, 
        "type": "ebook" 
       }, 
       { 
        "title": "PDF Sample", 
        "product_id": 2, 
        "type": "ebook" 
       }, // ... 
      ], 
      "set": [ 
       { 
        "title": "PDF Sample", 
        "product_id": 1, 
        "type": "ebook" 
       }, 
       { 
        "title": "PDF Sample", 
        "product_id": 2, 
        "type": "ebook" 
       }, // ... 
      ] 
     } 
    } 
}

在此先感謝。

來源

2016-05-31 keziah

您正在循環播放set，並且對於集合中的每個項目，您將創建一個新的ul元素。您需要創建一個ul多個循環，然後爲該部分添加所有li。我改變了你的數據結構，你不需要set屬性（並且由於屬性名稱是唯一的，所以它們相互覆蓋）。 basic現在是一個由代表set的數組組成的數組。

var data = { 
 
    "ebooks": { 
 
     "basic": [ 
 
      [ 
 
       { 
 
        "title": "PDF Sample 1", 
 
        "product_id": 1, 
 
        "type": "ebook" 
 
       }, 
 
       { 
 
        "title": "PDF Sample 2", 
 
        "product_id": 2, 
 
        "type": "ebook" 
 
       }, 
 
      ], 
 
      [ 
 
       { 
 
        "title": "PDF Sample 3", 
 
        "product_id": 1, 
 
        "type": "ebook" 
 
       }, 
 
       { 
 
        "title": "PDF Sample 4", 
 
        "product_id": 2, 
 
        "type": "ebook" 
 
       }, 
 
      ] 
 
     ] 
 
    } 
 
} 
 

 

 
data.ebooks.basic.forEach(function(set) { 
 
    var $list = $('<ul></ul>'); 
 
    
 
    set.forEach(function(pdf) { 
 
     $list.append('<li>' + pdf.title + '</li>') 
 
    }); 
 
       
 
    $('#ebook').append($list); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ebook"></div>

來源

2016-05-31 12:16:54

它看起來像問題，從選擇在這個片段莖：

$('#ebook').append('<ul>'); // Append new list sets 
    $('#ebook ul').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>');

的選擇「$（ '＃電子書UL'）」不會選擇在迭代中新添加了ul，相反它會追加到第一個匹配項（所以第一個ul添加到#ebook div）。相反，嘗試鏈接你的電話，像這樣：

/* EBOOKS*/ 
$.each(booksobj.set, function(i, item) { 
    $('#ebook').append('<ul>').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>'); 
});

在可變的工作與JSON數據例如：http://codepen.io/JasonGraham/pen/WxbvRo

來源

2016-05-31 12:26:00

你的問題是使用$（「＃電子書UL」），另外一個問題，爲什麼你用鍵「設置」兩次？沒有任何意義，

var data = { 
"ebooks": { 
    "basic": [ 
     [ 
      { 
       "title": "PDF Sample 1", 
       "product_id": 1, 
       "type": "ebook" 
      }, 
      { 
       "title": "PDF Sample 2", 
       "product_id": 2, 
       "type": "ebook" 
      }, 
     ], 
     [ 
      { 
       "title": "PDF Sample 3", 
       "product_id": 1, 
       "type": "ebook" 
      }, 
      { 
       "title": "PDF Sample 4", 
       "product_id": 2, 
       "type": "ebook" 
      }, 
     ] 
    ] 
} 
} 


$.each(data.ebooks.basic, function(i, item) { 
    $('#ebook').append('<ul>'); // Append new list sets 
    $.each(item, function(i, item2) { 
    $('#ebook ul:last').append('<li><a href="#" data-id="' + item2.product_id + '" data-type="' + item2.type + '">' + item2.title + '</a></li>'); 
}); 
});

看到fiddle

來源

2016-05-31 12:27:08

你做'ul'每個的每個項目設置 – keziah

哦，對不起，不，現在，有2個陣列，第一循環中，創造了UL，第二，在最後一個ul元素內部創建li –

jQuery JSON根據數組集數量追加ul

回答

相關問題