在html中顯示JSON數據的方法

有時候我們需要將json數據直接顯示在頁面上（比如在做一個接口測試的項目，需要將接口返回的結果直接展示），但是如果直接顯示字符串，不方便查看。需要格式化一下。

其實JSON.stringify本身就可以將JSON格式化，具體的用法是：

 JSON.stringify(res, null, 2); //res是要JSON化的對象，2是spacing

如果想要效果更好看，還要加上格式化的代碼和样式：

 function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(/ </g, '<').replace(/>/g, '>'); return json.replace(/((//u[a-zA-Z0-9]{4}|//[^u ]|[^//])*(/s*:)?|/b(true|false|null)/b|-?/d+(?:/./d*)?(?:[eE][ +/-]?/d+)?)/g, function(match) { var cls = 'number'; if (/^/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match) ) { cls = 'null'; } return '<span class=' + cls + '>' + match + '</span>'; });}

樣式代碼:

 <style> pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; }</style>

html代碼:

 <pre id=result></pre>

調用代碼:

 $('#result').html(syntaxHighlight(res));

效果:

以上所述是小編給大家介紹的在html中顯示JSON數據的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！