ajax获取json数据为多维数组时,前台js嵌套循环解析
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
ajax获取json数据为多维数组时,前台js嵌套循环解析
- 存放渲染数据的dom
<div id="goodsType" class="">
</div>
- 后台返回的数据格式如下:
[
{
"genusName":"浆果类",
"speciesList":[
{
"speciesName":"蓝莓",
"speciesType":110204
},
{
"speciesName":"无花果",
"speciesType":110203
},
{
"speciesName":"猕猴桃",
"speciesType":110202
},
{
"speciesName":"葡萄",
"speciesType":110201
}
]
},
{
"genusName":"瓜果类",
"speciesList":[
{
"speciesName":"香瓜",
"speciesType":110104
},
{
"speciesName":"哈密瓜",
"speciesType":110103
},
{
"speciesName":"甜瓜",
"speciesType":110102
},
{
"speciesName":"西瓜",
"speciesType":110101
}
]
}
]
可以看出这是一个多维数组,如何解析解析类似的数据并渲染到页面那?
- 解析方法如下:
ajax({
url : 'http://******/app_api/category/list?familyType=11',
type : 'post',
dataType:'json',
data : {},
success : function(data) {
var SmalltypeName = [];
$.each(data,function (i,item) { //循环得出“genusName”
SmalltypeName.push(item.genusName);
var aa ='<div class="samllType">'+
'<ul id="item'+i+'" class="ub ub-ac goodsType-ul">'+
'</ul>'+
'</div>'
$("#goodsType").append(aa);
$.each(item['speciesList'],function (j,item2) {//循环得出“speciesName”
var bb = '<li id='+item2["speciesType"]+'
class="ub-f1 tx-c">'+item2["speciesName"]+'</li>'
$("#item"+i).append(bb);
});
});
},
error : function (data){
alert("失败");
}
- 最终页面渲染效果:
GitHub 加速计划 / js / json
18
5
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:3 个月前 )
2d42229f
* Support BSON uint64 de/serialization
Signed-off-by: Michael Valladolid <mikevalladolid@gmail.com>
* Treat 0x11 as uint64 and not timestamp specific
Signed-off-by: Michael Valladolid <mikevalladolid@gmail.com>
---------
Signed-off-by: Michael Valladolid <mikevalladolid@gmail.com> 4 天前
1809b3d8
Signed-off-by: Niels Lohmann <mail@nlohmann.me> 5 天前
更多推荐
已为社区贡献3条内容
所有评论(0)