格式化JSON数据并将其附加到html div [英] Format and append JSON data to html div
本文介绍了格式化JSON数据并将其附加到html div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在应用程序中使用JSON数据，这是json数据的示例代码.
I am using JSON data in my application and here is a sample code of my json data.
{
"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数据排成一行.
I need to get one id data into a row.
假设id 1数据，我需要在一行中显示id 1数据及其其他5个数据.然后id 2数据，明智的.
Assume id 1 data, I need to show id 1 data and its other 5 data in one row. Then id 2 data, like wise.
这就是我查看此输出的方式，
This is the way I am looking this output,
<!-- 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>');
});
});
});
推荐答案
您要做的就是编写几个循环以遍历数组.这是使用 .forEach() .
All you have to do is write a couple of loops to iterate through your arrays. Here's a sample solution using .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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
