jquery parseHTML not working as expected

Question

I'm getting json data back from a jsonp call. The data is coming back alright. One data element is in the form of a string with some html in it ("p" tag, "a" tag). I'm trying to output this element (a picture description) within a jQuery dialog box. For some reason I can't get it to render as html, whether I use $.parseHTML or not.

Code snippet:

var image       = data.image;
var title       = data.title;
var id          = data.id;
var description = $.parseHTML( data.description );
var media       = data.media;
var secret      = data.secret;
if(media == "photo"){
    var string  = "<div id=\"picturebox\" class=\"picturebox\">\n";
    string += "    <img src=\""+image + "\" id=\"photo_"+id+"\" />\n";
    string += "    <h2>" + title + "</h2>\n";
    string += "    <p>" + description + "</p>\n";
    string += "</div>\n";
    $('#gbFullPic').html(string);
}

Although the dynamically produced div correctly displays, including the image and title, the "description" line outputs like this: [object Text]

If I remove the $.parseHTML the output looks like this:

Bird of paradise growing in south Florida.<p><a href="http://www.popgnology.com/guestbook.php">ACME Adventures</a></p>

That would be alright of course, if my html output did not show the actual html tags. What am I doing wrong?

UPDATE (2nd revision): My previous solution was incomplete. The problem was more complicated than a single jquery or javascript solution.

The problem began on the server side, with badly formed html that was sent via

header('content-type: application/json; charset=utf-8');
echo $cid . '('.json_encode($data).')';

• On the server side (PHP), I had to condition my "description" item, like so (note the addition of htmlspecialchars_decode and an addslashes wrapper):

    if($k == "description"){ 
      $data["$k"] = addslashes(htmlspecialchars_decode($v));
    }
    else{
      $data["$k"] = $v;
    }
  

• Then, this javascript properly rendered the json data item:

  var description   = data.description.replace('\\','');
  

With that two-step process of correcting the delivery format on the server page, and stripping slashes using a .replace on the client side, the "description" properly displays all text and html elements on the html page.

Answer 1

My guess is that your data.description is escaped and the method parseHTML isn't going to handle that. Check out this post for a solution:

Javascript decoding html entities

var text = '<p>name</p><p><span style="font-size:xx-small;">ajde</span></p><p><em>da</em></p>';
var decoded = $('<div/>').html(text).text();
alert(decoded);

So in your case:

var decoded = $('<div/>').html(data.description).text();
$('#gbFullPic').html(decoded);

Answer 2

Try var description = $($.parseHTML(data.description)).html();

jQuery's parseHTML returns an array of DOM nodes. You could then insert them into the DOM, but in your case you should get their .html() and add it to your string.