javascript - 使用 null 对象循环遍历 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 对象如下所示当我循环遍历它时，当涉及到 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 的 ALL 元素中。 。每次添加新图像时，所有现有的 <p>元素会得到它。
• $('.results ul').append - 参见上面的评论。每次追加时，所有匹配的现有元素都会附加额外的不需要的值
• 两者都是type和images值可以为 null，并且您没有在循环中提供任何防范措施。

考虑到上述假设，类似的事情对您来说会更好:

Demo Fiddle

代码:

// 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 结构的假设不正确，您可以调整上述代码以提供您需要的结果。