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

我在应用程序中使用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数据放入一行

假设ID1数据，我需要在一行中显示ID1数据及其其他5个数据。然后ID2数据，比如wise

这就是我看待这个输出的方式

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

                    });

                }); 
            });

$.getJSON（'data.json'，函数（数据）{
$.each（data.myMenu，函数（键，值）{
$（“#内容”）。追加（“”）；
$（“.标题”）。附加（“”）；
$.each（value.other，函数）（键，值）{
$（“.标题”）。附加（“”）；
});
}); 
});

您所要做的就是编写几个循环来迭代数组。这是一个使用的示例解决方案

var obj={
“我的菜单”：[
{  
“id”：“1”，
“名称”：“名称01”，
“图像”：“img_url”，
“其他”：[
{  
“图像”：“img_url”，
“名称”：“名称\u 01”
},
{  
“图像”：“img_url”，
“name”：“name_02”
},
{  
“图像”：“img_url”，
“名称”：“名称\u 03”
},
{  
“图像”：“img_url”，
“名称”：“名称”
},
{  
“图像”：“img_url”，
“名称”：“名称_05”
}
]
},
{  
“id”：“2”，
“名称”：“名称02”，
“图像”：“img_url”，
“其他”：[
{  
“图像”：“img_url”，
“名称”：“名称\u 01”
},
{  
“图像”：“img_url”，
“name”：“name_02”
},
{  
“图像”：“img_url”，
“名称”：“名称\u 03”
},
{  
“图像”：“img_url”，
“名称”：“名称”
},
{  
“图像”：“img_url”，
“名称”：“名称_05”
}
]
},
{  
“id”：“3”，
“名称”：“名称03”，
“图像”：“img_url”，
“其他”：[
{  
“图像”：“img_url”，
“名称”：“名称\u 01”
},
{  
“图像”：“img_url”，
“name”：“name_02”
},
{  
“图像”：“img_url”，
“名称”：“名称\u 03”
},
{  
“图像”：“img_url”，
“名称”：“名称”
},
{  
“图像”：“img_url”，
“名称”：“名称_05”
}
]
}
]
};
obj.myMenu.forEach（函数（项）{
变量元素=$（''+item.name+''）；
item.other.forEach（函数（otherItem）{
var otherElement=$（''+otherItem.name+''）；
元素。追加（其他元素）；
});
$（“正文”）。附加（元素）；
});
什么是
应该是？@DelightedD0D它是从JSONS获得的名称值，所以你实际上想要“name\u 01”等，而不是
？是的，我只是在那里注意到我需要显示名称“name\u 01”等等…我相信你可以理解，选择注意语法
有点误导…谢谢你的回答。在这里，我需要在主ID上显示我的名字和图像。在您的解决方案中，其他数据将正确追加。但它没有附加父内容。您希望父内容如何显示？您的示例输出中没有它，这很好。我成功了。我的意思是添加myMenu->id*->image/name，然后添加我更改的其他内容，var mainId=$（“”）；元素。追加（mainId）；在变量元素之后。：）我更新了答案。我想这就是你现在想要的。是的。这就是我想要的。谢谢你，戴夫。