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对象如下所示当我循环通过它时，当它涉及到空

时就把它踢出去

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]出现，因为它假设与pre中的最后[k]一样。 [I]

[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值都可以为空，您在循环中没有提供任何防范措施。

根据上述假设，这样的事情对你来说会更好：

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

Answer 2

从更清晰的代码结构开始，这样你就不会迷路太快......

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

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

使用null对象循环访问JSON

2 个答案: