не может правильно распечатать JSON API в JavaScript для HTML

Question

Я получаю json api из моего запроса javascript.Я могу напечатать вывод на консоль, и он выглядит правильно отформатирован, например,

{
  "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();      
});

, и я хочу напечатать в тег <p> с идентификатором "quote"

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

любая помощь приветствуется

Answer 1

По-другому вы можете заменить каждый '\ n' (перевод строки) на
и пробел на.

Фрагмент:

var jsonPretty = JSON.stringify( { "id": "1", "name": "John" } ,null,6);
document.querySelector('#quote').innerHTML = jsonPretty
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });


var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };
document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });

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

Answer 2

используйте тег <pre> вместо тега <p> или добавьте немного CSS для поддержания необходимого форматирования пробела.

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

Unstyled <p> tag

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



Unstyled <pre> tag

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

---

Стилизованный тег

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