CODEWITHSUNDEEP
javascript
Nick LaMarca
Nick LaMarca

Reputation: 8198

Parsing Complex JSON Javascript

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;

Upvotes: 1

Views: 1148

Answers (3)

Mark Porter
Mark Porter

Reputation: 1630

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

Upvotes: 1

josh3736
josh3736

Reputation: 145172

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.

Upvotes: 1

davidbuzatto
davidbuzatto

Reputation: 9444

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/

Upvotes: 0

Related Questions