How to use a line break in JSON?

When using JSON data from the backend to display text in HTML of your web application, we often encounter a problem where we need to change the paragraph or add a bullet point. To achieve the same, we sometimes settle by creating different object properties in the JSON for different paragraphs and bullets points. We display the same by using <br/> tag separated spans or paragraphs. This increases the complexity of the code and we end up with a messy code.



<!DOCTYPE html>
<html>
<body>

<h2>JSON without line break</h2>

<span id="para1"></span><br/>
<span id="para2"></span>

<script>
const withoutLineBreak = {
      paragraph1: "Lorsem Ipsum", 
      paragraph2: "Lorsem Ipsum" 
     }  
document.getElementById("para1").innerHTML = 
withoutLineBreak.paragraph1;
document.getElementById("para2").innerHTML = 
withoutLineBreak.paragraph2;
</script>

</body>
</html>

As we can’t add <br/> tag in JSON, we need to use \n (newline) before the start of the next paragraph or bullet point to break the line in JSON. You can now use a single object property for multiple paragraphs and bullet points. This significantly reduces the line of code in the HTML file.



<!DOCTYPE html>
<html>
<body>

<h2>JSON with line break</h2>

<span id="para" style="white-space:pre"></span>

<script>
const withLineBreak = {paragraph: "Lorsem Ipsum\nLorsem Ipsum"}
document.getElementById("para").innerHTML = withLineBreak.paragraph;
</script>

</body>
</html>

Even after adding \n to the string, you still see that the JSON is not breaking into separate paragraphs. This is because the CSS property white-space is set to normal by default.
In order to break the line, one needs to add the following style to paragraph or span.

`white-space: pre;`

pre stands for preformatted text. It will preserve the white space and text will only wrap on line breaks.
Use case: When developing a FAQ page for your web application and the data is coming in form of JSON from the backend.

Blog

How to use a line break in JSON?

Hardique Dasore

`white-space: pre;`

Join Our Newsletter. No Spam, Only the good stuff.

Related