ajax获取json数据为多维数组时,前台js嵌套循环解析

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 ='
'+ '
    +i+'" class="ub ub-ac goodsType-ul">'+ '
'
+ '
'
$("#goodsType").append(aa); $.each(item['speciesList'],function (j,item2) {//循环得出“speciesName” var bb = '
  • class="ub-f1 tx-c">'+item2["speciesName"]+'</li>' $("#item"+i).append(bb); }); }); }, error : function (data){ alert("失败"); }
    • 最终页面渲染效果:
      ajax获取json数据为多维数组时,前台js嵌套循环解析_第1张图片

    你可能感兴趣的:(js,html,ajax,json)