acspd7 acspd7 - 1 year ago 64
HTML Question

JSON Stringify not indenting properly in <pre> tag

I'm trying to use the JSON.stringify() function on a Javascript object but the indentation on the first curly brace doesn't look correct. The first line is indented, but everything else looks fine. I did some research, and another answer on StackOverflow suggested to use the

tag. Ideas?

My javascript code:

var result = {
name: "Jim Cowart",
location: {
city: {
name: "Chattanooga",
population: 167674
state: {
name: "Tennessee",
abbreviation: "TN",
population: 6403000
company: "appendTo",

$ = JSON.stringify(result, null, 2);

My HTML code:

<pre content-load id="json-data">
<div class="loader"></div>
<span>{{ data }}</span>

What actually renders in the browser (took a snapshot):

Snapshot of JSON Stringify

Answer Source

You have indentation before <span>, and <pre> means that this should be preserved in the rendering. Try:

<pre pams-content-load id="json-data">
    <div class="loader"></div>
{{ data }}</span>

so that the data is at the beginning of the line. Or put <pre> only around the JSON span.

<div class="loader"></div>
    <pre pams-content-load id="json-data"><span>{{ data }}</span></pre>