2

I have a json string like this: 

{ "choice": "gogo", "parameter": "high", "result": "[ { \"value_1\": 1.2, \"feature_1\": \"chicken\", \"prominent\": \"yes\" }, ...

The result portion of the json string has backslash characters, from the newlines in the json. I am trying to escape those characters so that I can show the json in html in a pretty fashion. Is there a way for javascript to interpret those newlines in the string so that it is displayed like this: 

{
    "choice": "gogo",
    "parameter": "high",
    "result": "[ { "value_1": 1.2, "feature_1": "chicken", "prominent": "yes" } ... and so on

I have tried:

Json result to html (Newline)

JSON.stringify output to div in pretty print way

How can I beautify JSON programmatically?

but all of them still output the json with the newline characters showing.

Also tried: 

var str = JSON.stringify(obj, null, 2);

but it still shows the backslashes.

Also tried using the pre tag inside the div that houses the json string: 

<div id="show_json"><pre></pre></div>
Community
  • 1
  • 1
Cybernetic
  • 12,628
  • 16
  • 93
  • 132
  • I think that it is related to this other question, check [here](http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript) – Dlanor Jun 29 '16 at 20:50
  • Tried that as well...but it still shows the backslashes – Cybernetic Jun 29 '16 at 20:51
  • Put `white-space: pre;` on the HTML you add the string to. Or use a `
    ` tag.
     – 4castle Jun 29 '16 at 20:53
  • your text file containing your json has new line characters, the json object doesn't. but that is not a problem, just don't try to display it as a string, create a loop that print ` '"' + key + '" : "' + value + '",\\n' ` for each one of them... – DIEGO CARRASCAL Jun 29 '16 at 20:53
  • 1
    Are you sure the backslashes are not escaping the inner quotes? – JonSG Jun 29 '16 at 20:54

1 Answers1

4

You can replace all of the backslashes:

var obj = {
  "choice": "gogo",
  "parameter": "high",
  "result": "[ { \"value_1\": 1.2, \"feature_1\": \"chicken\", \"prominent\": \"yes\" } ]"
};
document.body.innerHTML = JSON.stringify(obj, null, 4).replace(/\\/g, "");
body { white-space: pre }
4castle
  • 32,613
  • 11
  • 69
  • 106
  • There it is. Perfect, thank you! The backslashes are gone. Now I just need to indent the json, instead of having it like one long string. – Cybernetic Jun 29 '16 at 21:01
  • @Cybernetic `JSON.stringify` can do the indenting for you. I have that in my snippet. – 4castle Jun 29 '16 at 21:02
  • yeah I'm not sure why mine doesn't indent. – Cybernetic Jun 29 '16 at 21:05
  • While, nicely formatted, the result is incorrect now. The escape character is required to handle the inner quoting. – JonSG Jun 29 '16 at 21:19
  • @JonSG Agreed, but not necessarily incorrect. Pretty printing is for human readability, so perhaps the OP thought it was more readable without backslashes. Hopefully nothing will try to parse it though. – 4castle Jun 29 '16 at 21:21
  • Fair enough, and your answer is great. If someone wanted to have the correct result then your answer without the .replace(/\\/g, "") seems like it is the right one. – JonSG Jun 29 '16 at 21:23