Parsing HTML from a JSON String with jQuery

Question

I have no idea what im doing wrong, but I have a JSON string with this:

jsonp443489({"content":"<!DOCTYPE html><html><head><title>Title</title></head><body><p>Hello World</p></body></html>"});

I need to parse this to be able to modify the content. Like, for example, id want to grab the <p>'s content.

Now, in jQuery if i do:

console.log($(json.content).html());

It returns Title.

If i do:

console.log($('p',json.content));

It returns [], or, an empty array.

Finally, if I do just: console.log($(json.content));

It returns [<title>Title</title>,<p>Hello World</p>]

Which is fine, but then I cant do .find() or anything. Since I wont know what the HTML will be, i cant use $(json.content)[1].

Any ideas?

==UPDATE==

After hacking at this for a couple hours i decided to try XML. My example XML was:

<?xml version=\"1.0\" encoding=\"UTF-8\"?><doc><item>One</item><item>Two</item></doc>

It was giving me the same grief, then it hit me, its a JS object, not a string and jQuery is expecting a string. I went and did

$(JSON.stringify(json.content)).find('item')

And voila! I got an array of two items. I was pretty excited but then when I went and tried it with HTML again (using the JSONP return HTML snippet above):

console.log($(JSON.stringify(json.content)).find('p'));

I still get an empty array. It's driving me mad... Any more ideas?

Felix Kling · Accepted Answer · 2011-05-22 00:14:27Z

2

There might be a better way, but this works (retrieves the p elements):

$('<div />', {html: json.content}).find('p');

answered May 22, 2011 at 0:14

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

Oscar Godson Over a year ago

That wouldnt work right tho, would it? I mean, the HTML contains the DOCTYPE, head, etc and wrapping it in a div seems... naughty haha

Felix Kling Over a year ago

@Oscar: Invalid markup will be dropped. What you will end up with is <div><title>...</title><p>...</p></div>. I agree it is not pretty, but remember that you never add the div to the DOM of the page.

Parth · Accepted Answer · 2011-05-21 21:36:28Z

-1

What is jsonp443489 here? Why not just do $.parseJSON ?

Once you have done that you should be able to access content inside it and then create a jquery object from that content and search in it.

var json = $.parseJSON(jsoncontent); $(json.content).find('');// or you can add it to dom and search using $('#id')

answered May 21, 2011 at 21:36

Parth

5292 gold badges12 silver badges21 bronze badges

5 Comments

Oscar Godson Over a year ago

That is from getjson. :) that's what a jsonp request returns. Also you can't set a var to Ajax content since it doesn't exist yet.

Oscar Godson Over a year ago

Oops I read it as getjson not parsejson. Let me try that. Thanks

Oscar Godson Over a year ago

any idea why "var json = $.parseJSON(json);" then console.log(json) would return null? The JSON should be well formed...

Felix Kling Over a year ago

@Oscar: json is already a JavaScript object, not a string. You cannot parse a JS object to a JS object.

Oscar Godson Over a year ago

I know, i just thought jQuery had some magic in it. I figured thats why you suggested it.

Collectives™ on Stack Overflow

Parsing HTML from a JSON String with jQuery

2 Answers 2

2 Comments

5 Comments

Your Answer

Collectives™ on Stack Overflow

Parsing HTML from a JSON String with jQuery

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest