JQuery parse JSON

Question

I'm fairly new to JQuery. The code below works and I can see the correct JSON response in Firebug. But I couldn't find a way how to get and parse it in the code. Alert window only shows "[object Object]" but not any json text.

<script>

$.ajaxSetup({ cache: false });

var _token;

function make_token_auth(user, token) {
  var tok = user + ':' + token;
  return "Token " + tok;
}


$.ajax
  ({
    type: "GET",
    url: "url",
    dataType: 'json',    
    beforeSend: function (xhr){ 
        xhr.setRequestHeader('Auth', make_token_auth('userid', 'token')); 
    },
    success: function (data){
        alert(data); 
    }
});

</script>

Use `console.log(data)` instead of `alert()` in a good browser (not IE) you'll see the properties of the data object fully itemised in the console. — Rory McCrossan, Jan 07 '13 at 15:57

Denys Séguret · Accepted Answer · 2013-01-07T16:06:12.497

3

The fact you precised

dataType: 'json',

tells jQuery to parse the received answer and give it as a javascript object to your success callback.

So what you have here is fine and what is alerted is correct (this is an object, so alert simply prints the result of data.toString()).

Use console.log to see what it is exactly :

success: function (data){
    console.log(data); 
}

and open the developer tools in Chrome or the console in Firebug to browse the properties of the object.

edited Jan 07 '13 at 16:06

answered Jan 07 '13 at 15:58

Denys Séguret

372,613
87
782
758

he's already specified that he's using Firebug, so not sure why you're linking to the Chrome developer tools? – SDC Jan 07 '13 at 16:04

score 3 · Answer 2 · answered Jan 07 '13 at 15:59

3

don't use alert() for debugging -- it's often unhelpful (as in this case), and also has serious issues when used with asyncronous code (ie anything Ajax) because it interrupts the program flow.

You would be much better off using the browser's console.log() or console.dir() functions, and seeing the object displayed in the console. It is much more functional, and doesn't interrupt the flow of the program.

So instead of alert(myjsonvar) use console.log(myjsonvar).

answered Jan 07 '13 at 15:59

SDC

14,192
2
35
48

where can I see the console output? – Spring Jan 07 '13 at 16:03
1

@spring - in Firebug. See the "Console" tab at the top of the firebug window? – SDC Jan 07 '13 at 16:05

Vivian River · Answer 3 · 2013-01-07T16:17:45.840

1

The alert function expects you to pass in a string or number.

Try doing something like this:

for(x in data) {
    alert(x + ': ' + data[x]);
}

Update in response to comments: You can use alert in development or production to see string and number values in the object returned by the server-side code.

However, carefully rereading your question, it looks like what you really want to see is the actual JSON text. Looking at @dystroy's answer above, I think that if you remove the dataType: 'json' from your $.ajax invokation, jQuery will treat the response as plain text instead of automatically converting it to an Object. In this case, you can see the text by passing it to the alert function.

edited Jan 07 '13 at 16:17

answered Jan 07 '13 at 15:58

Vivian River

31,198
62
198
313

1

[the object passed to alert is automatically converted](https://developer.mozilla.org/en-US/docs/DOM/window.alert). – Denys Séguret Jan 07 '13 at 15:59
@dystroy, in my experience, a generic object becomes `[object Object]` when cast to a string. Do you know of a way to change this behavior? – Vivian River Jan 07 '13 at 16:01
You're not really wrong. What I pointed is that `alert` doesn't "expect" especially "a string or number". It's more the user who expect something more readable than [object Object]. And there is nothing special with numbers. – Denys Séguret Jan 07 '13 at 16:04
@Daniel Allen Langdon this one works and I can see on alert window, is this a test code or can i also use in production to get jsonvalues to "x" – Spring Jan 07 '13 at 16:07

score 1 · Answer 4 · answered Jan 07 '13 at 16:00

1

You can get the json string by using JSON.stringify

var jsonstr = JSON.stringify(data);
alert(jsonstr);

answered Jan 07 '13 at 16:00

benjaminbenben

1,218
8
15

score 0 · Answer 5 · answered Jan 07 '13 at 16:40

0

Try using

data = JSON.parse(data)

Then do whatever you want with the data.

Source: JSON.parse() (MDN)

answered Jan 07 '13 at 16:40

Jeff Noel

7,500
4
40
66

I get SyntaxError: JSON.parse: unexpected character – Spring Jan 08 '13 at 08:53
because if you check my code, you see that it returns object but your function parses strings – Spring Jan 08 '13 at 08:55
Oh, my bad. Try using a `console.dir()` instead of `console.log()` or `alert()` to see the content of your object, at least you'll be able to see if it's you receive the right answer in your console. You might want to take a look at http://stackoverflow.com/questions/1637334/iterating-through-parsing-json-object-via-javascript – Jeff Noel Jan 08 '13 at 13:14

JQuery parse JSON

5 Answers5