如何格式化单数组嵌套JSON数据并通过AJAX在浏览器中展示

核心逻辑说明 #

• 提取指定ID数据：先层级访问到person数组，再遍历匹配目标ID即可
• 格式化JSON展示：利用JSON.stringify的第三个缩进参数生成带格式的内容，配合<pre>标签保留换行和空格实现友好展示

完整实现代码 #

<div id="data"></div>
<script>
let response = [
    {"person":[{"id":1,"Name":"ben","Location":"uk","History":"Born 1990","Status":"male"},{"id":2,"Name":"lisa","Location":"us","History":"Born 1995","Status":"female"}]}
];

// 1. 提取指定ID的person数据，示例提取id=1的内容
function getPersonById(targetId) {
    // 层级访问到person数组
    const personList = response[0].person;
    // 匹配id返回对应数据，没找到返回null
    return personList.find(item => item.id === targetId) || null;
}
const targetData = getPersonById(1);

// 2. 格式化JSON并渲染，第三个参数2表示缩进2个空格
const formattedJson = JSON.stringify(targetData, null, 2);
// 用pre标签包裹保留格式
// 若未引入jQuery，可替换为原生写法：document.getElementById('data').innerHTML = `<pre>${formattedJson}</pre>`
$('#data').html(`<pre>${formattedJson}</pre>`);
</script>

可选美化方案（带语法高亮） #

如果需要不同字段用不同颜色区分展示，可以直接替换渲染逻辑，不需要额外引入依赖：

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        let cls = 'color: darkorange;';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'color: red;';
            } else {
                cls = 'color: green;';
            }
        } else if (/true|false/.test(match)) {
            cls = 'color: blue;';
        } else if (/null/.test(match)) {
            cls = 'color: magenta;';
        }
        return '<span style="' + cls + '">' + match + '</span>';
    });
}

// 替换之前的渲染逻辑即可
$('#data').html(`<pre>${syntaxHighlight(targetData)}</pre>`);

内容的提问来源于stack exchange，提问作者Dominic