使用空对象遍历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
    });
}

您是否在控制台中看到任何错误消息？