How to parse the Json using jquery

Question

I have a Json array as below

 {
 "Level":{
      "@attributes":
        {
                "value":"","type":"RelyingParty","others":"false","id":"1"
        }
     },
   "Role":{
     "@attributes":
              {
             "uuid":"838f7ee2-f11c-48f9-887f-8e485b74169b","type":"ADMIN"
              }
     },
   "Timeline":"2012",
   "Timezone":"GMT+330"
  }

How can i parse the above json data using jquery and store it in a javascript array. Because i am new to json any help on this will be very useful for me.

Second result on Google: http://www.google.com/search?q=jquery+json — Will Vousden, Feb 23 '12 at 07:00
That's a JSON object, actually an object fragment. Google JSON.parse() - that's all you need. — EdH, Feb 23 '12 at 07:00

T.J. Crowder · Accepted Answer · 2012-02-23T07:19:25.257

What you've quoted is not valid JSON, and even with a minimal modification, it wouldn't be an array. I suspect you just mean "object" (e.g., what PHP calls an associative array; really it's a map). What you've quoted looks like part of a JSON object definition, but it's missing the initial {.

jQuery offers jQuery.parseJSON for this very purpose:

var x = jQuery.parseJSON(strContainingJSON);

So adding the leading {, here it is:

str = '{' +
      '    "Level": {' +
      '        "@attributes": {' +
      '            "value": "",' +
      '            "type": "RelyingParty",' +
      '            "others": "false",' +
      '            "id": "1"' +
      '        }' +
      '    },' +
      '    "Role": {' +
      '        "@attributes": {' +
      '            "uuid": "838f7ee2-f11c-48f9-887f-8e485b74169b",' +
      '            "type": "ADMIN"' +
      '        }' +
      '    },' +
      '    "Timeline": "2012",' +
      '    "Timezone": "GMT+330"' +
      '}';
var x = jQuery.parseJSON(str);
console.log(x.Timeline); // "2012"

Of course, you probably get str from somewhere else (loading it from ajax or something), rather than directly in a string as in the above, but the end result is the same. Also note that if you are using ajax to load the JSON, if it's served with the correct MIME type, jQuery will parse it automatically, and then hand your ajax success function the resulting object.

If you really want an array (an ordered list), put [ at the beginning and ] at the end, creating a one-entry array containing the object:

str = '[' +
      '    {' +
      '        "Level": {' +
      '            "@attributes": {' +
      '                "value": "",' +
      '                "type": "RelyingParty",' +
      '                "others": "false",' +
      '                "id": "1"' +
      '            }' +
      '        },' +
      '        "Role": {' +
      '            "@attributes": {' +
      '                "uuid": "838f7ee2-f11c-48f9-887f-8e485b74169b",' +
      '                "type": "ADMIN"' +
      '            }' +
      '        },' +
      '        "Timeline": "2012",' +
      '        "Timezone": "GMT+330"' +
      '    }' +
      ']';
var x = jQuery.parseJSON(str);
console.log(x[0].Timeline); // "2012"

JSON starts and ends with `{` `}` as it's an object literal. `[` `]` are for arrays inside a JSON object. — Interrobang, Feb 23 '12 at 07:04
I have formed the above json data using json_encode function php. it outputs only the above json data, — gowtham kumar, Feb 23 '12 at 07:06
@Interrobang: No, see http://json.org. `[1, 2, 3]` is [valid JSON](jsonlint.com). The outermost structure can be an object *or* an array. — T.J. Crowder, Feb 23 '12 at 07:07
@gowthamkumar: You've left off the leading `{` at the least. — T.J. Crowder, Feb 23 '12 at 07:08
@gowthamkumar: No worries. Your question is answered now, right? — T.J. Crowder, Feb 23 '12 at 07:17
@T.J. Crowder Still i have some confusion in assigning the parsed data into an javascript array using jquery each function. can u please help me on it. — gowtham kumar, Feb 23 '12 at 07:21
@gowthamkumar: You never said anything about `each` in your question. But basically, just use it. Once you've done the `var x = jQuery.parseJSON(str);`, you can loop through the properties of the object via `jQuery.each(x, function(propName, propValue) { ... });` — T.J. Crowder, Feb 23 '12 at 07:31

How to parse the Json using jquery

1 Answers1