gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:05:27 25 4
gpt4 key购买 nike

<分区>

我在我的应用程序中使用 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>');

});

});
});

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com