Javascript printing code instead of executing it when changing the contents of HTML

Question

I am retrieving the body element of a JSON file, which is actually html code. I am trying to then add it to my HTML, but instead of running the code it prints as a p or header element(I suppose). Can any please tell me what I am doing wrong I am unable to find answers on other discussions.

<div id="title">

</div>


<div id="body">

</div>

<script>
  var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    document.getElementById("title").innerHTML = data[0].title;
    document.getElementById("body").innerHTML = data[0].body;
  }
</script>

You have to append/prepend the data[i] to the elements. Not set the value (like html/innerHtml/text) — Kumar Ashutosh, Jan 18 '19 at 01:52
You're overwriting all HTML content in the body with each of those statements. — isherwood, Jan 18 '19 at 01:53
Why are you returning html in json? in the first place? Why not just return the html? — Difster, Jan 18 '19 at 01:55
i tried appending but that didnt work either for me? Possibly show me an example? @Ashutosh — iceicebabeh, Jan 18 '19 at 01:56
Thats how the data was presented. The body element is written as an HTML string @Difster — iceicebabeh, Jan 18 '19 at 01:57
Run this with your Chrome console open. Set a breakpoint at line 40 in the Sources panel. Run again and inspect `data` to see what you're dealing with. https://jsfiddle.net/isherwood/tavrc6n3/ — isherwood, Jan 18 '19 at 01:57
sorry first line Id should be title not body @isherwood and okay — iceicebabeh, Jan 18 '19 at 01:58
Doesn't matter what's in each line. The `innerHtml` function replaces *all* content. You'll never see the first one. — isherwood, Jan 18 '19 at 02:02
This is the body line that I am dealing with "<ul> <li>Place item in the <strong>Garbage Bin.</strong></li> </ul>" Dont really know how to run it instead of displaying it as a string. Do you have any suggestions @isherwood — iceicebabeh, Jan 18 '19 at 02:05
Your real question is how to create an element from a string with HTML entities — Nick Parsons, Jan 18 '19 at 02:16

Nick Parsons · Accepted Answer · 2019-01-18T02:36:13.593

You can use a DOMParser to parse your string with HTML entities to a string of HTML which can then be rendered as a DOM element.

document.getElementById("body").innerHTML = htmlDecode("&lt;ul&gt; \n &lt;li&gt;Place item in the &lt;strong&gt;Garbage Bin.&lt;/strong&gt;&lt;/li&gt; \n&lt;/ul&gt;");

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

<div id="body"></div>

You can use this like so:

<div id="title"></div>
<div id="body"></div>

<script>

  function htmlDecode(input) {
    var doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
  }

  var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    document.getElementById("title").innerHTML = htmlDecode(data[0].title);
    document.getElementById("body").innerHTML = htmlDecode(data[0].body);
  }
</script>

Credit to this answer for DOMParser.

score 0 · Answer 2 · answered Jan 18 '19 at 02:13

I have used Jquery's "unescape" function. You can read it at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape

The unescape() function computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like escape. Usually, decodeURI or decodeURIComponent are preferred over unescape.

Please try this, hope this helps. Thnx

var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    var title_ = $("<p/>").html(data[0].title).text(); 
    var body_ = $("<p/>").html(data[0].body).text(); 
    //$('#body').append($.parseHTML(unescape(data[0].body)));
    $('#title').append(title_);
    $('#body').append(body_);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title">

</div>

<div id="body">

</div>

You have to append/prepend the data[i] to the elements. Not set the value (like ht)

Thanks alot that worked. Can you explain to me why my solution wasnt working and do you have a pure javascript solution — iceicebabeh, Jan 18 '19 at 02:17
I'm not that much into pure native javascript. But, yes there might be another solution for this in native. Your data[0].title and others were returning utf encoded string, (tag travel in network in encoded format) so, when you receive htem, you might want to convert them back into their original form. That's where escape/encode/un-escape/decode come in picture. — Kumar Ashutosh, Jan 18 '19 at 02:35

Javascript printing code instead of executing it when changing the contents of HTML

2 Answers2