Json parsing in javascript/jquery

Question

i need to parse the following json response.

{
"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"
            }
        ]
    }
]
}

for any help thanks..

Where are you getting this json response from?

eandersson
– eandersson

2013-04-03 10:30:06 +00:00
Commented Apr 3, 2013 at 10:30 — eandersson
– eandersson, Commented Apr 3, 2013 at 10:30

Jaya Mayu · Accepted Answer · 2013-04-03 10:37:58Z

we can easily parse using JSON.parse(YOUR-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" } ] } ] }';

putting it all together finall solution would be something like below

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);
});

here is a live example http://jsfiddle.net/mayooresan/bMHN8/

consider accepting it as correct answer if it helped you out.
yeah....do u have any idea how to represent this parsed data in xml tags showing parent and child nodes
I'm not sure how you can do it, but you can check the xml syntax and build smoething out of the parsed values.

Filippo oretti · Accepted Answer · 2013-04-03 10:29:27Z

var data = '{ "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 _json = JSON.parse(data);


    console.log(_json.attrs.width);

if you are retrieving JSON via Ajax in jQuery you can do:

 $.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);
    }
    ...
    });

Guffa · Accepted Answer · 2013-04-03 10:35:12Z

0

Use the parseJSON method:

var obj = $.parseJSON(json);

If you make an AJAX call to fetch the data, specify the JSON data type, and the response will be parsed automatically for you:

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

answered Apr 3, 2013 at 10:35

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:14:36Z

Using dot notation, you can access the properties and objects of your JSON data.

Firstly, assign your JSON response to a variable, e.g.

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" } ] } ] }

Example, to get the width of the JSON data object and display it via the console:

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

Returns: 578

And then to get the nested objects values, e.g.

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

Returns: an object with the x, y, sides, radius, etc. properties.

To access these, e.g.

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

Returns: 70

There is a more general answer to the dot and bracket notation/syntax here: How to extract a json object that's inside a json object

Collectives™ on Stack Overflow

Json parsing in javascript/jquery

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related