資訊專欄INFORMATION COLUMN
摘要：背景有時候我們需要將數(shù)據(jù)直接顯示在頁面上比如在做一個接口測試的項目，需要將接口返回的結(jié)果直接展示，但是如果直接顯示字符串，不方便查看。需要格式化一下。
背景：
有時候我們需要將json數(shù)據(jù)直接顯示在頁面上（比如在做一個接口測試的項目，需要將接口返回的結(jié)果直接展示），但是如果直接顯示字符串，不方便查看。需要格式化一下。
解決方案：其實JSON.stringify本身就可以將JSON格式化，具體的用法是：
javascriptJSON.stringify(res, null, 2); //res是要JSON化的對象，2是spacing
如果想要效果更好看，還要加上格式化的代碼和樣式：
js代碼:
javascriptfunction syntaxHighlight(json) {
if (typeof json != "string") {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, "&").replace(//g, ">");
return json.replace(/("(u[a-zA-Z0-9]{4}|[^u]|[^"])*"(s*:)?|(true|false|null)|-?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 "" + match + "";
});
}
樣式代碼:
css
html代碼:
html
調(diào)用代碼:
javascript$("#result").html(syntaxHighlight(res));
效果
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85853.html
摘要：本文將繼續(xù)上篇文章的旅程，給讀者介紹如何在圖數(shù)據(jù)庫中實現(xiàn)查詢結(jié)果的可視化。下面，讓我們一起來探究的奧秘吧查詢結(jié)果可視化圖數(shù)據(jù)庫的查詢語句的參考網(wǎng)址為。我們使用的數(shù)據(jù)仍來自文章圖數(shù)據(jù)庫的簡介及使用。 引入 ??在文章Cayley圖數(shù)據(jù)庫的簡介及使用中，我們已經(jīng)了解了Cayley圖數(shù)據(jù)庫的安裝、數(shù)據(jù)導入以及進行查詢等。??Cayley圖數(shù)據(jù)庫是Google開發(fā)的開源圖數(shù)據(jù)庫，雖然功能還沒有...
摘要：本篇講解轉(zhuǎn)義標簽投影定義，這幾項與如何分離界面設計有關(guān)。找一個替代品如上一篇非正經(jīng)入門之一所述，要克服漿糊的不利影響，要找一個替代品。本文完本專欄歷史文章介紹一項讓可以與抗衡的技術(shù)可視化開發(fā)工具非正經(jīng)入門之一三宗罪 本系列博文從 Shadow Widget 作者的視角，解釋該框架的設計要點。本篇講解轉(zhuǎn)義標簽、json-x、投影定義，這幾項與 如何分離界面設計 有關(guān)。 ? 1. 找一個 ...
閱讀 930·2021-11-22 12:09
閱讀 3704·2021-09-27 13:36
閱讀 1390·2021-08-20 09:37
閱讀 4008·2019-12-27 12:22
閱讀 2353·2019-08-30 15:55
閱讀 2359·2019-08-30 13:16
閱讀 2818·2019-08-26 17:06
閱讀 3434·2019-08-23 18:32
