复杂 json数据 js前台解析 详细步骤《案例：一》

一、直接上代码 !
这是后台传到前台的json格式字符串：

var p = '{"spec": [{"a": "XS"}, {"b": "S"}, {"2": "M"}, {"3": "L"}, {"4": "XL"}, {"5": "XXL"}]}'

1.第一步先转 先将json字符串转为JavaScript对象:

var  a =JSON.parse(p) ;

直接输出，看一下数据格式

a

验证一下数据格式

typeof(a)

typeof(p)

验证没问题！

2.循环数据
如下图所示，分析数据格式:

JavaScript对象 属性名称：spec 对应值为长度为6的数组，
6个元素 分别有自己的key和对应的value

3.循环数组，拿数据！
拿到数组：

a.spec

a.spec.forEach(function(obj,index){
     console.log(Object.keys(obj)[0]);
     console.log(Object.values(obj)[0]);
})

通过 Object.keys(obj)[0] 方法，获取 数组 元素对象的key值，循环并打印：
通过 Object.values(obj)[0] 方法，获取 数组 元素对象的value值，循环并打印：

好了，就到这里了，有疑问，
欢迎交流：QQ 1531613221 QQ群 201455739