Parsing Complex JSON Javascript

Question

I am able to parse JSON that returns simple data, with JSON.parse but I am having trouble with data that returns objects, dates, strings, etc..

var theData=JSON.parse(theData);

Something like this JSON.parse returns [Object] object back with no data at all (I can see the data is being successfully returned because it returns all the data as a string if I have JSON.parse turned off).

{
"AppName": "TheName",
"AppUrl": "https:\/\/app\/icons\/unknown.png",
"aGUID": "45c055d2-2edc-d4444"."DateCreated": "8\/23\/2012 11:04AM", {
    "ID": "yser123",
    Name ":" User "}
    }

What is the best way to go about parsing this data in javascript(I am not able to use jquery)?

Note: I had wrote the JSON assume its valid

Here is the code I am using to retreive the data..

var xhReq = new XMLHttpRequest();
xhReq.open("POST", "ClientService.svc/REST/GetDetail", false);
xhReq.send(null);
var serverResponse = xhReq.responseText;
alert(serverResponse);
return serverResponse;

That particular string you posted is invalid JSON. There's a missing " character towards the end. Otherwise JSON.parse() will handle anything (that's valid JSON). — Pointy
– Pointy, Commented Oct 1, 2012 at 18:55
Yes it needs to be valid JSON.Here's a good resource for checking if your JSON is valid: jsonlint.com — Jens Andersson
– Jens Andersson, Commented Oct 1, 2012 at 18:58
You make it difficult for people to help you if you don't post accurate information. The JSON.parse() mechanism will parse any sort of JSON structure, regardless of how complicated it is, up to the point that it starts running out of memory. Your sample JSON is definitely not too big. You should of course be checking for errors in the browser console. — Pointy
– Pointy, Commented Oct 1, 2012 at 19:04

Community · Accepted Answer · 2017-05-23 10:24:52Z

1

First and foremost, don't use synchronous XHR. Rewrite your JavaScript to be asynchronous.

function getDetail(cb) {
    var xhReq = new XMLHttpRequest();
    xhReq.open("POST", "ClientService.svc/REST/GetDetail", true);
    xhReq.onreadystatechange = function() {
        if (xhReq.readyState == 4) cb(xhReq.responseText);
    }
    xhReq.send(null);
}

// to call:

getDetail(function(data) {
    JSON.parse(data);
}

Second, your problem is not that JSON is being parsed incorrectly. It's your debugging call to alert. When you pass the serverResponse object, alert coerces the object into a string by calling the object's toString method, which simply returns '[object Object]'.

Try console.log. Objects can be inspected in the console.

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Oct 1, 2012 at 19:19

josh3736

146k34 gold badges227 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pointy Over a year ago

Wow well that certainly cut through a lot of noise :-)

Nick LaMarca Over a year ago

why cant I use synchronous XHR?

josh3736 Over a year ago

@NickLaMarca: As a rule, synchronous XHR is a major no-no. There's detail here and here, but most importantly, sync XHR is being phased out.

Mark Porter · Accepted Answer · 2012-10-01 19:25:06Z

1

It actually sounds like this is working. If you call some thing like this:

alert(JSON.parse(serverResponse))

It will display [object Object] which is correct. If you call

alert(JSON.parse(serverResponse).appName)

You should see the appName. If you are not seeing "SyntaxError"s being thrown, JSON.parse() is working

answered Oct 1, 2012 at 19:25

Mark Porter

1,6309 silver badges9 bronze badges

Comments

davidbuzatto · Accepted Answer · 2012-10-01 19:15:23Z

0

Your JSON format is wrong and the data needs to be a string.

So, this will work (I broke the lines to improve readability):

var data = "{" + 
    "    \"AppName\": \"TheName\", " + 
    "    \"AppUrl\": \"https:\/\/app\/icons\/unknown.png\", " + 
    "    \"aGUID\": \"45c055d2-2edc-d4444\", " + 
    "    \"DateCreated\": \"8\/23\/2012 11:04AM\", " +
    "    \"foo\": { " + 
    "        \"ID\": \"yser123\", " + 
    "        \"Name\":\"User\"" + 
    "    }" + 
    "}";
var obj = JSON.parse(data);
alert( obj.AppName );

Of course, if you use simple quotes as string delimiter, the code would be:

var data = '{' + 
    '    "AppName": "TheName", ' + 
    '    "AppUrl": "https:\/\/app\/icons\/unknown.png", ' + 
    '    "aGUID": "45c055d2-2edc-d4444", ' + 
    '    "DateCreated": "8\/23\/2012 11:04AM", ' +
    '    "foo": { ' + 
    '        "ID": "yser123", ' + 
    '        "Name":"User"' + 
    '    }' + 
    '}';

This not works:

var data = "{" + 
    "    'AppName': 'TheName', " + 
    "    'AppUrl': 'https:\/\/app\/icons\/unknown.png', " + 
    "    'aGUID': '45c055d2-2edc-d4444', " + 
    "    'DateCreated': '8\/23\/2012 11:04AM', " +
    "    'foo': { " + 
    "        'ID': 'yser123', " + 
    "        'Name': 'User'" + 
    "    }" + 
    "}";

jsFiddle: http://jsfiddle.net/9pmdm/1/

edited Oct 1, 2012 at 19:15

answered Oct 1, 2012 at 18:59

davidbuzatto

9,4841 gold badge48 silver badges52 bronze badges

5 Comments

Alnitak Over a year ago

why escape the double quotes when you could just have enclosed it in single quotes...?

Nick LaMarca Over a year ago

The JSON I have is created by C# from an actual .Net object I dont have control of the created JSON. The sample JSON I put in the question maybe invalid (missing quotes maybe) cause I hand wrote it for sample purposes. Is it possible .Net maybe screwing up the JSON returned?

Pointy Over a year ago

Forward slashes should be quoted, though I agree that it seems unnecessary. I think JSON.parse() won't insist on it but it's definitely valid.

Dykam Over a year ago

@NickLaMarca, seems odd to me. And what .NET lib are you using? I always had to use JSON.Net, but there are some integrated options. Could you paste output of the .Net side?

davidbuzatto Over a year ago

@Pointy: Hi! Thanks for the advice. I never noticed that :S, but as you said the parsers don't complain about that. I updated my answer to escape "/".

Collectives™ on Stack Overflow

Parsing Complex JSON Javascript

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related