json，数组的循环案例

Posted 2020-11-06 fanny123

大部分小伙伴工作中都会遇见json跟数组结合使用，案例up一下

var data = {

　　‘2018’ : [

　　　　{

　　　　　　‘title‘ : ‘案例一‘，

　　　　　　‘name’ : ‘fanny1‘

　　　　},

　　　　

　　　　{

　　　　　　‘title‘ : ‘案例一‘，

　　　　　　‘name’ : ‘fanny2‘

　　　　}

　　],

　　‘2017’ : [

　　　　{

　　　　　　‘title‘ : ‘案例二‘，

　　　　　　‘name’ : ‘fanny1‘

　　　　},

　　　　

　　　　{

　　　　　　‘title‘ : ‘案例二‘，

　　　　　　‘name’ : ‘fanny2‘

　　　　}

　　]

}

 

一般从后台接收的很大部分数据都是这样的形式

1.json里面的循环  ：  for(var key in data)  {}

有一种方法可以直接获取key值  Object.keys(data)   

如果要获取单独的key值   Object.keys(data)[0]

2.数组的循环就很多种，举例一个

var arrayData = data[key];

arrayData.map((item,index)=>{

　　console.log(item)   //这样就获取数组的每一个数据了

})

3.如果你的外层需要这些数据，我们来拼接

var shtml="";

for(var key in data) {

　　var reportData = data[key];

　　shtml1 += ‘<li>‘;

      shtml1 += ‘<div class="menu_title"><span>‘ + key + ‘年</span></div>‘;

　　shtml1 += ‘<ul class="menu_content">‘;

　　reportData .map((item,index)=>{
    　　 shtml1 += ‘<li attr-href=‘+item.title+‘ attr-img=‘+item.name+‘>‘+item.title+‘</li>‘;
　　 }

　　shtml1 += ‘</ul></li>‘;

 

}

然后在渲染进去

document.querySelector(".main").appendChild(shtml1 );

 

*注意问题

这里面的key值如果是数字，默认是升序排列，需要自己排列一下