JSON Stringify在<pre> tag

Question

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 <pre> 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",
};

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

My HTML code:

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

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

Answer 1

您在<span>之前有缩进，而<pre>表示应在渲染中保留此缩进。尝试：

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

以便数据位于行的开头。或者只将<pre>放在JSON范围内。

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