json - jQuery.getJSON and jQuery.parseJSON return [object Object]?

Question

EDIT: I've gotten the "famous question" badge with this question, so I figured I'd come back to it and stick what happened to me right at the very tippy top for people searching it to get an answer right away.

Basically, I was new to JSON. JSON is an object (obviously), as it contains all kinds of stuff! So I was like "Hey, javascript, just pop up an alert with all of this JSON data", expecting it to give me the JSON data as a string. But javascript doesn't do that (which is good!), so it was like "Hey, this is how we display objects, [object Object]".

What I could've done is something like alert(obj.DATA[0][1]) and it would've shown me that bit of the object.

What I really wanted was to verify that I was making good JSON data, which I could've checked with JSON.stringify.

Anyway, back to our regularly scheduled questions!

---

I'm trying to get some JSON data with an ajax call, but jQuery doesn't seem to like my JSON.

if I do something like:

function init2() {
    alert("inside init2");
    jQuery.ajax({
        url: "/Mobile_ReportingChain.cfm",
        type: "POST",
        async: false,
        success: function (data) {
            alert(data);
            var obj = jQuery.parseJSON(data);
            alert(obj);
        }
    });
}

I get this as from alert(data):

    {"COLUMNS":["MFIRST_NAME","MLAST_NAME","MMDDL_NAME","MEMPLY_ID","MAIM_NBR","EMPLY_ID"],
    "DATA":[

["FNAME1          ","LNAME1                  ","MI1              ","000-14-7189","026-0010","000-62-7276"]      

,["FNAME2           ","LNAME2                    ","MI2              ","000-01-2302","101-1850","000-14-7189"]  

,["FNAME3           ","LNAME3                  ","MI3              ","000-91-3619","102-1000","000-01-2302"]    

,["FNAME4         ","LNAME4                  ","MI4              ","000-25-9687","102-1000","000-91-3619"]  

]}  

which JSONLint says is valid json. alert(obj) gives me this, however:

[object Object]

adding dataType: "json" or "text json" just makes it report [object Object] at alert(data).

I'd really like to get this figured out, does anyone know why it's doing this? I'm pretty new at jQuery, my goal is to get an array for each of the columns. The same code I'm using has worked on a different page it looks like, which is what's bothering me the most.

Answer 1

The alert() function can only display a string of text. As its only parameter it takes a string or an object. The object will however be converted into a string that can be displayed.

When fetching JSON through jQuery, the $.ajax() method will automatically parse the JSON and turn it into a JavaScript object for you. Your data variable is therefor a JavaScript object, and not a JSON string as one might expect.

Since alert() only can display strings, when trying to alert your data object, your object will be turned into its string representation. The string representation of a JavaScript object is [object Object].

For debug-purposes you can use console.log(data) instead. You can then inspect the object and its content through the console in your browsers developer tools.

function init2() {
    jQuery.ajax({
        url: "/Mobile_ReportingChain.cfm",
        type: "POST",
        dataType: "json",
        async: false,
        success: function (data) {
            console.log(data);
        }
    });
}

If you for some reason still want to alert the JSON-data, then you would have to turn your data object back into a JSON-string. To do that you can make use of JSON.stringify:

alert(JSON.stringify(data));