当前位置：网站首页>复杂 json数据 js前台解析详细步骤《案例：一》

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

2022-07-02 05:59:00 【一轮大月亮】

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

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

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

var  a =JSON.parse(p) ;

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

在这里插入图片描述
验证一下数据格式

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