javascript - 无法正确将javascript中的json api打印到html

我从我的JavaScript请求中获取了JSON API。我能够将输出打印到控制台，并且它看起来格式正确，例如

{
  "id": "1",
  "name": "John"
}

但是当我打印到html页面时。看起来像这样

'{"id": "1", "name": "john"}'

这是我的JavaScript文件

$(function() {
    //variables
    var functionName = 'getQuotes';

    function LoadData() {
        $.get("http://localhost/quoteapi/api.php?function="+functionName+"&jsonCallback=?", function(data) {
            // console.log(data);
            jsonstr = data.substring(2, data.length-1)
            console.log(jsonstr);
            var jsonPretty = JSON.stringify(jsonstr,null,6);
        });
    }

    LoadData();
});

我想打印到ID为“ quote”的<p>标记

<p id="quote"></p>

任何帮助表示赞赏

最佳答案

使用<pre>标记而不是<p>标记，或添加一些CSS来维护所需的空格格式。

.code {
    font-family: monospace;
    white-space: pre;
}

Unstyled &lt;p&gt; tag
<p>
{
  "id": "1",
  "name": "John"
}
</p>

<hr>
Unstyled &lt;pre&gt; tag
<pre>
{
  "id": "1",
  "name": "John"
}
</pre>

<hr>
Styled &lt;p&gt; tag
<p class="code">
{
  "id": "1",
  "name": "John"
}
</p>