JSON.parse() cannot parse string with HTML

Question

I checked many questions but didn't see a solution.

I have JSON which was STRINGIFIED (containing HTML). This JSON is stored as a string on an element. When I try to JSON.parse(str) I am getting errors

I know that the errors are due to the special symbols \n \t etc and has to be escaped. So how to parse this string which is the JSON and have it as an object.

var obj = {
  "blocks": [{
    "frames_content": "<div id=\"page\" class=\"page\">\n    \n    \t<div class=\"container\" id=\"divider1\">\n    \n    \t\t<div class=\"col-md-12\">\n    \n    \t\t\t<hr class=\"dashed\" data-selector=\"hr.dashed\" style=\"outline: none; cursor: inherit;\">\n    \t\n    \t\t</div><!-- /.col -->\n    \t\n    \t</div><!-- /.container -->\n    \n    </div>",
    "frames_sandbox": false,
    "frames_loaderFunction": "",
    "frames_height": 162,
    "frames_original_url": "/static/admin-users/pages/elements/divider1.html"
  }]
};
document.getElementById("debug").innerHTML = JSON.stringify(obj);
var str = document.getElementById("debug").innerHTML;
var x = JSON.parse(str);
console.log(x);

<div id="debug"></div>

===== UPDATE

If I read the element with .text() works

I have one more scenario which I don't get how to solve

<script>
var str = '{"pages":{"index":{"blocks":[{"frames_content":"<div id=\"page\" class=\"page\">\n    \n    \t<div class=\"container\" id=\"divider1\">\n    \n    \t\t<div class=\"col-md-12\">\n    \n    \t\t\t<hr class=\"dashed\" data-selector=\"hr.dashed\" style=\"outline: none; cursor: inherit;\">\n    \t\n    \t\t</div><!-- /.col -->\n    \t\n    \t</div><!-- /.container -->\n    \n    </div>","frames_sandbox":false,"frames_loaderFunction":"","frames_height":162,"frames_original_url":"/static/admin-users/pages/elements/divider1.html"}]}},"responsiveMode":"desktop"}';

var obj = JSON.parse(str);
</script>

Should I escape them with REGEX or what ? What is the best way ?

Koen thank you, you made my night I killed few hours scratching my head — user43506
– user43506, Commented Oct 15, 2016 at 22:18
The HTML you gave isn't the HTML you get back. Do you really need to store it in the DOM? Why not localStorage? — user1106925
– user1106925, Commented Oct 15, 2016 at 22:19

Andy Ray · Accepted Answer · 2016-10-15 22:18:30Z

1

jQuery .html() automatically escapes things like quotes into their HTML entity form. The HTML actually being put into the DOM looks like this:

{"blocks":[{"frames_content":"<div id="\&quot;

Notice the ", which when displayed in a browser will be a double quote. It's an HTML entity.

To pull the code you want back out of the DOM without the HTML entities, use .text() instead of .html()

var str=$("#debug").text();

Additionally, I would encourage you to get comfortable debugging your code. console.log()-ing the contents of the str variable would have helped you uncover what's going on.

answered Oct 15, 2016 at 22:18

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

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

1 Comment

user43506 Over a year ago

OK, with text works fine. I don't understand one thing why if I have the string in a var: like

var str = '{"blocks":[{"frames_content":"\n    \n    \t\n    \n    \t\t\n    \n    \t\t\t\n    \t\n    \t\t\n    \t\n    \t\n    \n    ","frames_sandbox":false,"frames_loaderFunction":"","frames_height":162,"frames_original_url":"/static/admin-users/pages/elements/divider1.html"}]}'

JSON.parse(str) will return error and the same string taken from an element with .text() will work

Oriol · Accepted Answer · 2016-10-15 22:21:43Z

Using the HTML parser and serializer does not return the original string unchanged.

You should call JSON.parse with the unaltered result of JSON.stringify(obj).

var obj = {
  "blocks": [{
    "frames_content": "<div id=\"page\" class=\"page\">\n    \n    \t<div class=\"container\" id=\"divider1\">\n    \n    \t\t<div class=\"col-md-12\">\n    \n    \t\t\t<hr class=\"dashed\" data-selector=\"hr.dashed\" style=\"outline: none; cursor: inherit;\">\n    \t\n    \t\t</div><!-- /.col -->\n    \t\n    \t</div><!-- /.container -->\n    \n    </div>",
    "frames_sandbox": false,
    "frames_loaderFunction": "",
    "frames_height": 162,
    "frames_original_url": "/static/admin-users/pages/elements/divider1.html"
  }]
};
var str = JSON.stringify(obj);
document.getElementById('debug').innerHTML = str;
console.log(JSON.parse(str));

<div id="debug"></div>

eg04lt3r · Accepted Answer · 2016-10-15 22:23:04Z

0

Please use:

var str=$("#debug").text(); // not html()

This will fix your issue with deserializing JSON.

answered Oct 15, 2016 at 22:23

eg04lt3r

2,62016 silver badges19 bronze badges

Collectives™ on Stack Overflow

JSON.parse() cannot parse string with HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related