在前端开发中,经常需要从后端获取 JSON 数据,然后进行二次操作。若这个 JSON 数据的结构比较复杂,那么如何快速获取其中的二级数据呢?下面我们用一个例子来说明。
假设后端返回的 JSON 数据如下:
{
"name": "张三",
"age": 25,
"address": {
"province": "广东",
"city": "深圳",
"district": "南山区"
}
}
我们要获取 address 下的 province、city、district 三个数据。我们可以使用以下 JavaScript 代码:
let jsonString = '{"name":"张三","age":25,"address":{"province":"广东","city":"深圳","district":"南山区"}}';
let data = JSON.parse(jsonString);
let province = data.address.province;
let city = data.address.city;
let district = data.address.district;
console.log(province, city, district);
上述代码的第一行,是一个 JSON 字符串。我们需要使用 JSON.parse
方法,将其转为一个 JavaScript 对象。然后我们就可以通过点语法,获取其中的二级数据了。
值得注意的是,获取二级数据时,我们使用的是 data.address.province
而非 data.address['province']
。这是因为使用点语法,可以更加简明地表示出属性之间的层级关系,而使用方括号语法,不仅显得麻烦,还容易出错。