Print plain JSON content to html page in Javascript / jQuery

Question

After getting an HTTP response in the form a JSON file, how can I handle its plain content using jQuery?

I've done this before, but I just can't figure out how right now.

I'm using this function to retrieve the JSON content.

var json = $.getJSON("test.json", function(response){ // do stuff } );

Of course, I can handle the data contained in the JSON, but I'd like to handle and print its plain content, like this:

{"name": "Pepe","age" : "20"}

The following

alert(response);

Just gives me [object Object]

And this

alert(jQuery.parseJSON(json));

Just gives me null

I can't seem to find the answer anywhere. I'm pretty new to all this, so I must be using the wrong search terms, because it looks like a trivial matter.

Try console.log instead of alert because it allows you to see what's inside the object. — ayyp
– ayyp, Commented Jul 10, 2012 at 19:53
@AndrewPeacock console.log only works if you have a console available and in some IE versions it does not allow you to see what's inside. Use JSON.stringify(json) to convert it to plain text. — TheZ
– TheZ, Commented Jul 10, 2012 at 19:54
A browser with a console is necessary for javascript development period. — Austin
– Austin, Commented Jul 10, 2012 at 19:55
@Austin I wouldn't dream of it either, but when doing something that is targeted at certain browsers it can be impossible to replicate or debug in others. Like when being forced to use IE for ActiveX object, etc. — TheZ
– TheZ, Commented Jul 10, 2012 at 19:56
All IE versions back to 5 have a console log, which dates back to quirks mode in the 90s. No browser worth supporting will be too old to have a console. Just my 2¢ — Austin
– Austin, Commented Jul 10, 2012 at 19:57

JohnD · Accepted Answer · 2012-07-10 19:55:56Z

9

JSON.stringify is probably what you want. MDN Docs

answered Jul 10, 2012 at 19:55

JohnD

4,0121 gold badge30 silver badges41 bronze badges

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

3 Comments

cangrejo Over a year ago

This is, I think, the answer that best fits my question, although what Rocket said is actually what best fits my desires. Don't know which one to accept. Will you guys get mad if I flip a coin?

gen_Eric Over a year ago

@broncoAbierto: Which ever one works better for you. It's fine :-P

JohnD Over a year ago

I'd actually go with what Rocket said, it's less processing for the client.

gen_Eric · Accepted Answer · 2012-07-10 20:44:52Z

8

The callback to $.getJSON actually has 3 parameters. data, textStatus and jqXHR.

The jqXHR object contains a responseText property that contains the raw JSON string.

var json = $.getJSON("test.json", function(response, status, jqXHR){ // do stuff console.log(jqXHR.responseText); } );

edited Jul 10, 2012 at 20:44

answered Jul 10, 2012 at 20:05

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

2 Comments

cangrejo Over a year ago

Thanks, this is actually what I wanted, although my question was maybe a little misguiding. Where can I find the documentation for this? The jQuery website is a little sparse...

gen_Eric Over a year ago

@broncoAbierto: The jqXHR object (api.jquery.com/jQuery.ajax/#jqXHR) is a wrapper around the native XMLHttpRequest object (developer.mozilla.org/en/xmlhttprequest).

Tom Walters · Accepted Answer · 2012-07-10 19:54:47Z

Instead of using alerts to see output, how about using the console, and then using John Resig's solution to logging this kind of data?

// usage: log('inside coolFunc',this,arguments); // http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/ window.log = function(){ log.history = log.history || []; // store logs to an array for reference log.history.push(arguments); if(this.console){ console.log( Array.prototype.slice.call(arguments) ); } };

And then:

window.log(response);

Taken from: http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/

Collectives™ on Stack Overflow

Print plain JSON content to html page in Javascript / jQuery

3 Answers 3

3 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Related