How to display decoded html text with jQuery with data from JSON

Question

I have JSON text that has a body tag with text like:

[
    {
      "body":&lt;ul&gt;\n&lt;li&gt;Place item in the&amp;nbsp;&lt;strong&gt;box.&lt;\/strong,
      "category":"A",
      "title":"A box",
      "keywords":"bread bag tag, milk bag tag, elastic band, rubber band, twist tie, rope, twine, string, hemp, ribbon, bow, burlap, staple";
   }
]

(The original JSON file is in correct syntax) The JSON file has many tags like that with title, body, and keywords. I am supposed to search with keywords (from input box in html), match and then display title and body. I can display the title with no problem. I can display body like:

<ul><li>Place item in the <strong>box</strong></li>

I have tried using .html(), .text(), $.parseHTML in all combinations. Here's the code snippet:

    $.getJSON(url, function(response)
    {
        if(response.length)
        {
            $('#table_item').empty();
            var content = '';
            for(var i = 0; i < response.length; i++)
            {
            if((response[i].keywords).indexOf(key) != -1)
            {
                content += '<div class="row"><div class="column"><div>';
                content += response[i].title;
                content += '</div></div><div class="column"><div id="bbody"><p>';
                var bodyJson = response[i].body;
                $("#bbody").html(bodyJson).text();
                $("#bbody").html($("#abody").html(bodyJson)); //THIS LINE
                content += '</p></div></div></div>';
                }
            }
            $('#table_item').append(content);
        }
    });

What I can't do is write the way it's supposed to be, that is bullets and bold:

Place item in the box

Let me know if you need more info, or if I'm asking the question in a wrong way. Thanks a lot!

I'm going to assume the JSON you receive from the server is valid JSON? Because that snippet isn't. Just to exclude that as the cause of the issue. — , Jan 10 '19 at 21:44
@ChrisG Yes it is, sorry I'll let make that clear in the question — Harshdip Singh Deogan, Jan 10 '19 at 21:45
I took a quick look and noticed that you're creating HTML with `id="bbody"` in a loop, but an `id` is supposed to be unique. Plus, you cannot call `$("#bbody")` on an element that doesn't exist yet; you have a HTML string but it's not part of the dom yet. Why not just insert it, like the other parts? Edit: fixed JSON, here's a working example: https://jsfiddle.net/khrismuc/y9tw2qkj/ — , Jan 10 '19 at 21:48
Possible duplicate of [Unescape HTML entities in Javascript?](https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript) — , Jan 10 '19 at 21:52
@ChrisG this works perfectly. Thank you so much! I'm wondering about the thing you said that the element doesn't exist yet, does it not exist until I do the .append() ? — Harshdip Singh Deogan, Jan 10 '19 at 22:50
Until you do append, all you have is a string. The browser has no idea that the string contains HTML, much less that it contains an element with a certain `id`. — , Jan 10 '19 at 23:30

score 0 · Answer 1 · answered Jan 10 '19 at 22:24

0

You'll need to add a tool to do the decoding

<script src="https://www.strictly-software.com/scripts/downloads/encoder.js"></script>

Then change your code to this:

content += Encoder.htmlDecode(unescape(bodyJson));

Then you don't have to use jQuery to .html()

answered Jan 10 '19 at 22:24

stillatmylinux

1,399
13
25

This works like a charm. Is there no way where I can still get the result without using a third party script? – Harshdip Singh Deogan Jan 10 '19 at 22:49
No. You can only decode one entity at a time. Read the javascript for the htmlDecode function in encoder.js For example, to convert © you first have to provide the matching char code which is 169. So then you can do String.fromCharCode(169), but you can't do that to a whole line of HTML. – stillatmylinux Jan 10 '19 at 23:04

score 0 · Accepted Answer · answered Jan 10 '19 at 22:55

0

I made a codepen for you to check out. I used $.parseHTML to take the escaped html into a node object, then from there I appended it by using the nodeValue property.

When you are receiving JSON from a server, be sure to use JSON.parse to transform it into JS object instead of a JSON object.

Check out $.parseHTMLfor more information.

Hope this helps you out. Message me if you need more help. :D cheers!

answered Jan 10 '19 at 22:55

m6f

51
4

There's no such thing as a JSON object. And `$.getJSON` parses the JSON into an object before passing it to the callback. – Jan 10 '19 at 23:28
The payload/response is still a string. So it's needs to be workable, i.e. made into an object that can be manipulated. That's all I meant. My bad long day. – m6f Jan 11 '19 at 15:41

How to display decoded html text with jQuery with data from JSON

2 Answers2