将JSON数据以指定格式添加到HTML div中

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>');

                    });

                }); 
            });

- WP Learner

---

所以你实际上想要“name_01”等出现在那里，而不是<name>？ - Wesley Smith

当然可以，我刚才注意到我需要显示名称“name_01”等等... - WP Learner

我相信你能理解，选择使用语法<name>来进行注释有点误导。 - Wesley Smith

@DelightedD0D 很抱歉，<name> 是文本名称，而不是标签。 - WP Learner

让我们在聊天室中继续这个讨论。 - WP Learner

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>

- Dave

---

谢谢答复。在这里，我还需要在主要 ID 上显示我的姓名和图片。在您的解决方案中，其他数据附加正确。但它没有附加父级内容。 - WP Learner

您希望如何显示父级内容？您的示例输出中没有它。 - Dave

没问题，我已经完成了。我的意思是添加myMenu -> id* -> 图片/名称，然后再添加其他内容。我已经做出了更改，添加了以下代码： var mainId = $('<div class="channel heading"><img src="' + item.image + '"></div>'); element.append(mainId); 这段代码应该放在 var element. 的后面 :) - WP Learner

我更新了答案。我认为现在它是你想要的。 - Dave

是的，这就是我想要的。谢谢Dave。 - WP Learner