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("失败");
	    }

• 最终页面渲染效果：