1

JSON:

{"data": {
  "heading": "Module 2: Discussion Boards 1",
  "description": "Students were asked to post to the Discussion board the responses they gathered from interviewing an experienced online instructor.\n Students were then asked to read the posts and offer feedback to their colleagues.",
  "tabs": {
    "tabItem": [
      {
        "value": "Edgar and Amy Conflict"
      },
      {
        "value": "Oliver's Document"
      },
      {
        "value": "Two Professors?"
      }
    ]
  }
}
}

Javascript:

var actual_JSON = JSON.parse(response);

             document.getElementById("heading").innerHTML = actual_JSON.data.heading;
             document.getElementById("description").innerHTML = actual_JSON.data.description;

Result

The new line (\n) does not work. I have tried \\n but to no avail.

When I tried var actual_JSON = JSON.strigify(response); in the console.log I can get the new line if I replace \n with <br> in the JSON but then it does not work as an object so the rest of the code breaks down.

I have seen many posts in this regard and tried the solutions presented, but I'm missing something.

Thanks for any help!

Alex K.
  • 171,639
  • 30
  • 264
  • 288
user2191049
  • 13
  • 2
  • 3
    `\n` is generally meaningless in HTML, replace it with `
    ` & address the consequences or apply `white-space: pre-line;` to the element as a last resort.     – Alex K. Mar 29 '17 at 15:25
  • or use a 
     formated html tag for the input.
     – Bekim Bacaj Mar 29 '17 at 15:30
  • Have a look at [How do I replace all line breaks in a string with
    tags?](http://stackoverflow.com/q/784539/218196)     – Felix Kling Mar 29 '17 at 15:41
  • I do not/cannot have line breaks in the data in JSON because that would not be JSON compliant. So I have to use some other way to add formatting like
    in the data and then have HTML display it. However when I do that, the tags show up as regular text in the HTML page and are not being interpreted as code.     – user2191049 Mar 29 '17 at 17:21
  • Thanks Alex K. You were also right about the
    solution. The issue was in two places with different code. The second piece of code was appending a new para element and that's why the text was being passed to it via textContent, which does not render tags and instead shows them as is. Converted that to innerHTML as well and all is well. Thanks fo rall the help guys!     – user2191049 Mar 30 '17 at 13:32

1 Answers1

0

The new line is not effective because it's in an HTML element

<p> Hello this new line will 
not work </p>

Will result in "Hello this new line will not work" in one line

But 

<p> Hello this new line will <br />
work </p>

Will result in "Hello this new line will work" in two lines line

For HTML use <br />

Nawwar Elnarsh
  • 1,049
  • 16
  • 28
  • So I tried adding the
    tag in the JSON file, but it shows up as is on the HTML page. Thought I needed to escape it, a single backslash was not JSON coompliant so tried two backslashes but no luck :/     – user2191049 Mar 29 '17 at 16:46
  • Can you use inspect element in chrome (Right click Inspect Element) to see the content of the HTML element and actual inner html after the javascript action took place – Nawwar Elnarsh Mar 29 '17 at 18:08
  • Yes, on inspection, the HTML is exactly as the JSON - with the
    tags in place (so not rendered).     – user2191049 Mar 29 '17 at 20:09