使用空對象遍歷JSON

Question

我的JSON文件有此問題。

{"results" :[{
    "name" :    "name1",
    "type" :[{
        "id" : '2',
    },{
        "id" : '1',
    },{
        "id" : '4',
    },{
        "id" : '6',
    }],
}],
    "images" :[{
    "url" : "url0",
    },{
    "url" : "url1",
    },{
    "url" : "url2",
    },{
    "url" : "url3",
    },{
    "url" : "url4",
}],
},{
    "name" :    "name2",
    "type" :[{
    {
        "id" : '25',
    },{
        "id" : '123',
    },{
        "id" : '423',
    },{
        "id" : '346',
    }],
    "images" :[{
        "url" : "url0",
    },{
        "url" : "url1",
    },
    {
        "url" : "url2",
    },
    {
        "url" : "url3",
    },{
        "url" : "url4",
    }],
},  
 },{
    "name" :    "name3",
    "type" : null,
"images" :null,
},.....
]}

JSON對象如下所示：當我遍歷JSON對象時，將其踢出null

for(var i = 0; i < results.length; i++){
   $('.results')append('<p class="liste">'+results[i].name+'</p><ul></ul>');
   $('.liste').prepend('<img src="'+results[i].images[1].url+'"');
   for(var j = 0; j < results[i].type.length; j++){
      $('.results ul').append('<li>'+results[i].type[j].id+'</li>');
   }
}

結果應該看起來像這樣

<div class="results">
   <img src="url1"><p>name1</p>
       <ul>
         <li>2</li>
         <li>1</li>
         <li>4</li>
         <li>6</li>
       </ul>
   <img src="url1"><p>name2</p>
       <ul>
       </ul>
   <img src="url1"><p>name3</p>
       <ul>
         <li>25</li>
         <li>123</li>
         <li>423</li>
         <li>346</li>
       </ul>
</div>

我嘗試過

if(results[i].images != null){
   $('.liste').prepend('<img src="'+results[i].images[1].url+'">');
}else{
  $('.liste').prepend('<img src="some default image" width="170" height="170">');
}
if(results[i].type != null){
for (var j = 0; j < results[i].type.length.length; j++) {
  $('.album').append('<li>'+[i]+'-'+[j]+'-'+results[i].type.length[j].id+'</li>');
};

它確實很混亂，每個[i]都出現了圖像，並且第一個[k]出現了，因為它應該與前一個[k]一樣。 [一世]

[i][j]
   name1
[0][0]
[0][1]
[0][2]
[0][3]
[1][0]
   name2
[1][0]    
......

我希望有人可以幫助我

編輯我忘記了每個名稱下面列出的每個“類型”。

Answer 1

您提供的JSON無效，但是，假設JSON如下所示（基於您當前的迭代代碼）：

var results = [{
    "name": "name1",
    "type": [{ "id": '2'}, 
             { "id": '1'},
             { "id": '4'}, 
             { "id": '6'}],
    "images": [{ "url": "url0" },
               { "url": "url1" }, 
               { "url": "url2" }, 
               { "url": "url3" },
               { "url": "url4" }],
    }, {
    "name": "name2",
    "type": [{ "id": '25' }, 
             { "id": '123' },
             { "id": '423' }, 
             { "id": '346' }],
     "images": [{ "url": "url0" }, 
                { "url": "url1" }, 
                { "url": "url2" }, 
                { "url": "url3" }, 
                { "url": "url4" }],
    }, {
    "name": "name3",
    "type": null,
    "images": null
    }];

此語句有幾個問題：

for(var i = 0; i < results.length; i++){
   $('.results')append('<p class="liste">'+results[i].name+'</p><ul></ul>');
   $('.liste').prepend('<img src="'+results[i].images[1].url+'"');
   for(var j = 0; j < results[i].type.length; j++){
      $('.results ul').append('<li>'+results[i].type[j].id+'</li>');
   }
}

• $（'。liste'）。prepend將提供的元素附加到具有.liste類的所有元素上。 每次添加新圖像時，所有現有的<p>元素都會獲取它。
• $（'。results ul'）。append-參見上面的注釋。 每次附加時，所有匹配的現有元素都會附加附加的不需要的值
• type和images值都可以為null，並且您在循環中未提供任何防范措施。

鑒於上述假設，類似的內容將更適合您：

演示小提琴

碼：

// Use a document fragment to avoid DOM updates in the loop
var $fragment = $(document.createDocumentFragment());
for (var i = 0; i < results.length; i++) {
    // If there is an image, add it
    if(results[i].images) {
        $fragment.append($('<img src="' + results[i].images[1].url + '"/>'));
    }

    $fragment.append($('<p class="liste">' + results[i].name + '</p>'));

    // Keep track of the current UL so it can be appended to directly
    var $curULTag = $('<ul></ul>').appendTo($fragment);

    if(results[i].images && results[i].type) {
        for (var j = 0; j < results[i].type.length; j++) {
            // add the li to the current UL 
            $curULTag.append('<li>' + results[i].type[j].id + '</li>');
        }
    }
}

// Append the full results 
$('.results').append($fragment);

結果：

<div class="results">
    <img src="url1">
    <p class="liste">name1</p>
    <ul>
        <li>2</li>
        <li>1</li>
        <li>4</li>
        <li>6</li>
    </ul>
    <img src="url1">
    <p class="liste">name2</p>
    <ul>
        <li>25</li>
        <li>123</li>
        <li>423</li>
        <li>346</li>
    </ul>
    <p class="liste">name3</p>
    <ul></ul>
</div>

如果我對您提供的JSON結構的假設不正確，則可以調整以上代碼以提供所需的結果。

Answer 2

從更清晰的代碼結構開始，這樣您就不會太迷路...

if (jsonData.results)
{
    $.each(jsonData.results, function(obj)
    {
         // process obj.name if exists
         // process obj.type if exists
    });
}

您是否在控制台中看到任何錯誤消息？