javascript/jquery中的Json解析_Javascript_Jquery_Json_Parsing

javascript/jquery中的Json解析

javascript jquery json parsing

javascript/jquery中的Json解析,javascript,jquery,json,parsing,Javascript,Jquery,Json,Parsing,我需要解析以下json响应 { "attrs": { "width": 578, "height": 200 }, "nodeType": "Stage", "children": [ { "attrs": {}, "nodeType": "Layer", "children": [ { "attrs": { "x": 289,

我需要解析以下json响应

{
"attrs": {
    "width": 578,
    "height": 200
},
"nodeType": "Stage",
"children": [
    {
        "attrs": {},
        "nodeType": "Layer",
        "children": [
            {
                "attrs": {
                    "x": 289,
                    "y": 100,
                    "sides": 6,
                    "radius": 70,
                    "fill": "red",
                    "stroke": "black",
                    "strokeWidth": 4
                },
                "nodeType": "Shape",
                "shapeType": "RegularPolygon"
            }
        ]
    }
]
}

感谢您的帮助。

我们可以使用JSON轻松解析。parseYOUR-JSON-STRING

把所有这些放在一起，最终的解决方案如下

var jsonStr = '{ "attrs": { "width": 578, "height": 200 }, "nodeType": "Stage", "children": [ { "attrs": {}, "nodeType": "Layer", "children": [ { "attrs": { "x": 289, "y": 100, "sides": 6, "radius": 70, "fill": "red", "stroke": "black", "strokeWidth": 4 }, "nodeType": "Shape", "shapeType": "RegularPolygon" } ] } ] }';

var parsedData = JSON.parse(jsonStr);
alert(parsedData.attrs.width)


$.each(parsedData.children, function (index, value) {
    $.each(this.children, function (index, value) {
        $('#mydata').append(' x value is : '+this.attrs.x);
        $('#mydata').append(' y value is : '+this.attrs.y);
    });
    console.log(this);
});

下面是一个活生生的示例

我们可以使用JSON轻松解析。parseYOUR-JSON-STRING

把所有这些放在一起，最终的解决方案如下

var jsonStr = '{ "attrs": { "width": 578, "height": 200 }, "nodeType": "Stage", "children": [ { "attrs": {}, "nodeType": "Layer", "children": [ { "attrs": { "x": 289, "y": 100, "sides": 6, "radius": 70, "fill": "red", "stroke": "black", "strokeWidth": 4 }, "nodeType": "Shape", "shapeType": "RegularPolygon" } ] } ] }';

var parsedData = JSON.parse(jsonStr);
alert(parsedData.attrs.width)


$.each(parsedData.children, function (index, value) {
    $.each(this.children, function (index, value) {
        $('#mydata').append(' x value is : '+this.attrs.x);
        $('#mydata').append(' y value is : '+this.attrs.y);
    });
    console.log(this);
});

这是一个活生生的例子

如果您在jQuery中通过Ajax检索JSON，可以执行以下操作：

 $.ajax({
    /* Set the JSON datatype in ajax call*/
    dataType:'json',
    ...
/* get json in response and you already have it "parsed" */
     success:function(json){

     console.log(json.attrs.width);
    }
    ...
    });

如果您在jQuery中通过Ajax检索JSON，可以执行以下操作：

 $.ajax({
    /* Set the JSON datatype in ajax call*/
    dataType:'json',
    ...
/* get json in response and you already have it "parsed" */
     success:function(json){

     console.log(json.attrs.width);
    }
    ...
    });

使用：

如果进行AJAX调用以获取数据，请指定JSON数据类型，响应将自动为您解析：

$.ajax({
  url: "jsondata",
  dataType: "json",
  success: function(obj) {
    alert(obj.nodeType);
  }
});

使用：

如果进行AJAX调用以获取数据，请指定JSON数据类型，响应将自动为您解析：

$.ajax({
  url: "jsondata",
  dataType: "json",
  success: function(obj) {
    alert(obj.nodeType);
  }
});

使用点表示法，您可以访问JSON数据的属性和对象

首先，将JSON响应分配给一个变量，例如

var json = { "attrs": { "width": 578, "height": 200 }, "nodeType": "Stage", "children": [ { "attrs": {}, "nodeType": "Layer", "children": [ { "attrs": { "x": 289, "y": 100, "sides": 6, "radius": 70, "fill": "red", "stroke": "black", "strokeWidth": 4 }, "nodeType": "Shape", "shapeType": "RegularPolygon" } ] } ] }

例如，要获取JSON数据对象的宽度并通过控制台显示它，请执行以下操作：

console.log(json.attrs['width']);

报税表：578

然后获取嵌套对象的值，例如

console.log(json.children[0].children[0].attrs);

返回：具有x、y、边、半径等属性的对象

要访问这些，例如

console.log(json.children[0].children[0].attrs['radius']);

报税表：70

这里有一个关于点括号表示法/语法的更一般的答案：