JSON数据的那点事

1.基础

JSON有两种结构,对象和数组。

JSON对象结构是以“{”大括号开始,以“}”大括号结束。中间部分由n个以“,”分隔的“key(键)/value(值)”对构成,关键字和值之间以“:”分隔,一般语法结构如下方代码所示(其中key是字符串,而value可以是字符串,数值,true,false,null,对象或数组):

1
2
3
4
5
{
name: xiao ming,
age: 18,
...
}

JSON数组结构是以“[”开始,“]”结束,中间由n个以“,”分隔的值列表组成,一般语法结构如下方代码所示:

1
2
3
4
5
6
7
8
9
10
[
{
name: xiao ming,
age: 18
},
{
name: xiao hong,
age: 21
}
]

2.操作

分为两种方式:“.”和“[key]”。


其中JSON对象与JSON数组可互相转换,譬如有下边一组JSON数据需要格式化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"10": {
"id": 7,
"sorts": 0,
"level": 1,
"goods": []
},
"11": {
"id": 8,
"sorts": 0,
"level": 1,
"goods": []
},
"12": {
"id": 10,
"sorts": 0,
"level": 2,
"goods": []
}
}
  1. 首先尝试遍历展示对应数据的时候json.parse()后直接获取JSON对象的length,返回的结果肯定是undefined了。
  2. 遍历后json[i]获取到i的值是对应当前数据的key值,而期望得到的是以0为下标开始的数据格式(类似于JSON数组的下标表示方式)。
  3. 网上的方法如下图for in的循环方式,处理结果只能得到数据的总长度,解决了最开始直接获取length输出undefined的问题,数据结构依然不是期望结果。
1
2
3
4
5
6
7
8
9
10
11
12
13
function getjson(json){
var jsonLength = 0;
for(var item in json){
jsonLength++;
}
return jsonLength;
}

最终,通过Object.keys.map()方法组合将JSON对象转化为JSON数组。转化代码如下:

1
2
3
4
json = JSON.parse(json);
json = Object.keys(json).map(function(k){
return json[k];
});
  • 根据数据情况需先将字符串转化为对象
  • Object.keys(json)返回参数json可被遍历的属性
  • .map()返回json遍历后JSON数组。