如何 style/format JSON 响应并以用户可读的格式显示？

Question

我正在做一个个人项目，邮递员克隆。我正在使用 fetch API 来获取数据，然后使用 JSON.stringify() 将其转换为字符串并将其显示在“textarea”中，这是“Response”字段，如下所示。遇到一个答案- ，但它似乎对我不起作用。

How can I format the json object or the string and display it inside the "Response" tab ?

**Here is the html code for the response field**
<div class="responseBox">
    Response
    <textarea class="responseText" id="responseId" ></textarea>
</div>

**JS code for fetching the response using Fetch API and displaying it in Response field :** 
const response = await fetch(url);
console.log("Fetching data...");
const e = await response.json();
console.log(e);
responseId.innerText=JSON.stringify(e);

**CSS for response field :** 
.responseText{
width: 705px;
height: 350px;
position: relative;
right: 255px;
white-space: pre;

}

Answer 1

正如您的答案 linked 所暗示的那样，JSON.stringify 函数支持格式化 JSON 字符串，这就是您应该格式化 JSON 字符串的方式。

JSON.stringify(jsObj, null, "\t"); // stringify with tabs inserted at each level
JSON.stringify(jsObj, null, 4);    // stringify with 4 spaces at each level

如何 style/format JSON 响应并以用户可读的格式显示？

How to style/format JSON response and display it in user readable format?

html

javascript

json

stringify

fetch-api