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

最新推荐文章于 2022-03-14 11:46:06 发布

bai_riqiang

最新推荐文章于 2022-03-14 11:46:06 发布

阅读量8.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js html ajax json 文章标签：解析数据 json json解析 ajax

本文链接：https://blog.youkuaiyun.com/bai_riqiang/article/details/78722257

js 同时被 3 个专栏收录

5 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

json

2 篇文章

订阅专栏

本文介绍了一种使用Ajax从服务器获取多维JSON数据的方法，并详细解释了如何通过嵌套循环来解析这些数据，最终实现将数据正确地渲染到前端页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最终页面渲染效果：