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 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐