前端解析json字符串或对象

最新推荐文章于 2025-04-29 14:49:02 发布

天明少侠

最新推荐文章于 2025-04-29 14:49:02 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Front-end frame 文章标签： json json解析

本文链接：https://blog.youkuaiyun.com/thebigdipperbdx/article/details/87970398

Front-end frame 专栏收录该内容

14 篇文章

订阅专栏

本文深入讲解JSON数据结构，包括对象和数组两种基本形式，以及如何通过这两种结构组合成复杂的数据结构。同时，提供了JSON格式示例及解析方法，介绍了如何在JavaScript中遍历和获取JSON对象的属性值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSON基于两种结构

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构

1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,…}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。
2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 [“java”,“javascript”,“vb”,…]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。
3、经过对象、数组2种结构就可以组合成复杂的数据结构了。

JSON格式

{
    "status":"true",
    "msg":"加载数据成功",
    "total":0,
    "data":{
        "420500":[
                [
                    112.073724,
                    30.697902
                ],
                [
                    112.074205,
                    30.697032
                ]
            ],
        "540228":[[
                    112.073736,
                    30.698459
                ],
                [
                    112.073724,
                    30.697902
                ]]
    }
}

解析JSON

如果拿到的是JSON字符串，需先解析成JSON对象
已是JSON对象，遍历并获取JSON对象的属性值和子数组

function drawRegionMap(dtIds) {
    $.ajax({
        url: "baseData/getPolygonPoints",
        type: "POST",
        data: {districtIds: dtIds },
        dataType: "json",
        success: function (json) {
            // 后台加了@ResponseBody注解，所以拿到的json就是JSON对象
            if (json.status == "true") {
                // JSON 对象
                var data = json.data;
                // 遍历data对象下面的属性节点
                // districtId为键，data[districtId][i]为值
                for (var districtId in data) {
                    //console.log("districtId =" +districtId)
                    // 属性节点的子数组的遍历
                    for (var i = 0; i < data[districtId].length; i++) {
                        //console.log("i=" + i +" data = " + data[districtId][i])
                        drawPolygon(map, data[districtId][i]);
                    }
                }
            } else {
                layer.msg(json.msg);
            }
        },
        //调用出错执行的函数
        error: function () {
            layer.msg("获取区域坐标范围失败");
        }
    });
}