Question

我在我的应用程序中使用JSON数据，这是我的json数据的示例代码。

{  
   "myMenu":[  
      {  
         "id":"1",
         "name":"name 01",
         "image":"img_url",
         "other":[  
            {  
               "image":"img_url",
               "name":"name_01"
            },
            {  
               "image":"img_url",
               "name":"name_02"
            },
            {  
               "image":"img_url",
               "name":"name_03"
            },
            {  
               "image":"img_url",
               "name":"name_04"
            },
            {  
               "image":"img_url",
               "name":"name_05"
            }
         ]
      },
      {  
         "id":"2",
         "name":"name 02",
         "image":"img_url",
         "other":[  
            {  
               "image":"img_url",
               "name":"name_01"
            },
            {  
               "image":"img_url",
               "name":"name_02"
            },
            {  
               "image":"img_url",
               "name":"name_03"
            },
            {  
               "image":"img_url",
               "name":"name_04"
            },
            {  
               "image":"img_url",
               "name":"name_05"
            }
         ]
      },
      {  
         "id":"3",
         "name":"name 03",
         "image":"img_url",
         "other":[  
            {  
               "image":"img_url",
               "name":"name_01"
            },
            {  
               "image":"img_url",
               "name":"name_02"
            },
            {  
               "image":"img_url",
               "name":"name_03"
            },
            {  
               "image":"img_url",
               "name":"name_04"
            },
            {  
               "image":"img_url",
               "name":"name_05"
            }
         ]
      }
   ]
}

我需要将一个id数据放入一行。

假设id 1数据，我需要在一行中显示id 1数据和其他5个数据。那么id 2数据，就像明智一样。

这是我看这个输出的方式，

        <!-- id 1 content -->
        <div class="headings">
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
        </div>
        <!-- id 2 content -->
        <div class="headings">
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
        </div>
        <!-- id 3 content -->
        <div class="headings">
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
            <div class="heading"><img src...><name></div>
        </div>

这就是我试过的，

            $.getJSON('data.json', function(data) { 

                $.each(data.myMenu, function(key, value) {

                    $('#content').append('<div class="headings"></div>');                                                       
                    $('.headings').append('<div class="heading"><img src="'+ value.image +'" alt="name" /></div>');

                    $.each(value.other, function(key, value) {

                        $('.headings').append('<div class="heading"><img src="'+ value.image +'" alt="name 2" /></div>');

                    });

                }); 
            });

Answer 1

您所要做的就是编写几个循环来迭代数组。以下是使用.forEach()的示例解决方案。

var obj = {  
   "myMenu":[  
      {  
         "id":"1",
         "name":"name 01",
         "image":"img_url",
         "other":[  
            {  
               "image":"img_url",
               "name":"name_01"
            },
            {  
               "image":"img_url",
               "name":"name_02"
            },
            {  
               "image":"img_url",
               "name":"name_03"
            },
            {  
               "image":"img_url",
               "name":"name_04"
            },
            {  
               "image":"img_url",
               "name":"name_05"
            }
         ]
      },
      {  
         "id":"2",
         "name":"name 02",
         "image":"img_url",
         "other":[  
            {  
               "image":"img_url",
               "name":"name_01"
            },
            {  
               "image":"img_url",
               "name":"name_02"
            },
            {  
               "image":"img_url",
               "name":"name_03"
            },
            {  
               "image":"img_url",
               "name":"name_04"
            },
            {  
               "image":"img_url",
               "name":"name_05"
            }
         ]
      },
      {  
         "id":"3",
         "name":"name 03",
         "image":"img_url",
         "other":[  
            {  
               "image":"img_url",
               "name":"name_01"
            },
            {  
               "image":"img_url",
               "name":"name_02"
            },
            {  
               "image":"img_url",
               "name":"name_03"
            },
            {  
               "image":"img_url",
               "name":"name_04"
            },
            {  
               "image":"img_url",
               "name":"name_05"
            }
         ]
      }
   ]
};

obj.myMenu.forEach(function(item) {
  var element = $('<div class="headings"><img src="' + item.image + '">' + item.name + '</div>');
  item.other.forEach(function(otherItem) {
    var otherElement = $('<div class="heading"><img src="' + otherItem.image + '">' + otherItem.name + '</div>');
    element.append(otherElement);
  });
  $("body").append(element);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

格式化并将JSON数据附加到html div

1 个答案: