最普通的展示
获取请求的 JSON 数据
var dataParsed = object;
const formattedDataHtmlFormat = JSON.stringify(dataParsed, null, 2).replace(/ /g, " ").replace(/\n/g, "<br />");
pm.visualizer.set(formattedDataHtmlFormat);
带颜色的普通展示
let template = `
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=js" defer></script>
<pre class="prettyprint">{{raw}}</pre>
</div>
`
pm.visualizer.set(template, {
response: object,
raw: JSON.stringify(object, null, 2)
});
表格形式
// GO TO THE END OF THE TEST SCRIPT.
var template = `
<style>
.fill,
body,
html {
height: 100%
}
#json_vl,
.td_head,
.td_row_even,
.td_row_odd {
font-size: small
}
#json_pnl,
#xxa,
.navbar-header,
.navbar-nav,
.navbar-nav>li,
.td_head {
float: left
}
.fill {
min-height: 100%
}
#json_vl {
font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace
}
#widget {
width: 100%
}
.top_size {
height: 51px
}
#all_panels {
height: 100%;
min-height: 100%
}
#aboutLnk {
position: fixed;
right: 10px;
top: 15px
}
#inner_text {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin-top: 51px;
margin-bottom: 0
}
#json_pnl {
background-color: #ccc;
width: 33.3%
}
#xxa {
background-color: #E8E8E8;
width: 66.7%
}
#table_pnl,
#tree_pnl {
background-color: #E8E8E8;
float: left;
width: 50%
}
#sharethis {
position: fixed;
right: 80px;
top: 10px
}
#inner_tbl {
padding-left: 2px
}
.td_row_even {
padding: 2px;
background-color: #F6F4F0
}
.td_row_odd {
padding: 2px;
background-color: #FFF
}
.td_head {
padding: 2px;
font-weight: 700
}
input,
p,
select,
td,
textarea,
th {
font-size: 1em
}
table,
td,
th {
border: 1px solid gray
}
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 4px;
border: 1px solid #333;
overflow-y: auto;
overflow-x: hidden
}
*,
html {
font-family: Verdana, Arial, Helvetica, sans-serif
}
form,
h1,
h2,
h3,
h4,
h5,
li,
p,
ul {
margin: 0;
padding: 0
}
img {
border: none
}
p {
margin: 0 0 1em
}
table {
font-size: 100%;
background-color: white;
}
ol.tree {
padding: 0 0 0 30px;
width: 300px
}
li {
position: relative;
margin-left: -15px;
list-style: none
}
li.file {
margin-left: -1px !important
}
li.file a {
background: url(leaf.png)0 5px no-repeat;
color: #000;
padding-left: 12px;
text-decoration: none;
display: block;
font-size: small
}
li.file a[href$='.css'],
li.file a[href$='.js'],
li.file a[href*='.pdf'],
li.file a[href*='.html'] {
background: url(http://www.thecssninja.com/demo/css_tree/document.png)no-repeat
}
li input {
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0
}
li input+ol {
background: url(http://www.thecssninja.com/demo/css_tree/toggle-small-expand.png)40px -3px no-repeat;
margin: -20px 0 0 -44px;
height: 1em;
padding: 1.563em 0 0 80px
}
li label.lbl_array,
li label.lbl_obj {
display: block;
padding-left: 33px;
margin-bottom: 2px
}
li input+ol>li {
display: none;
margin-left: -14px !important;
padding-left: 1px
}
li label.lbl_obj {
background: url(folder.png)15px 1px no-repeat;
cursor: pointer
}
li label.lbl_array {
background: url(array.png)15px 1px no-repeat;
cursor: pointer
}
li input:checked+ol {
background: url(http://www.thecssninja.com/demo/css_tree/toggle-small.png)40px -3px no-repeat;
margin: -20px 0 0 -44px;
padding: 1.563em 0 0 80px;
height: auto
}
li input:checked+ol>li {
display: block;
margin: 0 0 .125em
}
li input:checked+ol>li:last-child {
margin: 0 0 .063em
}
.container {
width: 970px;
max-width: none !important
}
.col-xs-4 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, .15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, .2)
}
</style>
<div id="html">
<input type="text" id="json">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="json2table.js"></script>-->
<script>
$(function() {
pm.getData((err, data) => {
$("#json").val(JSON.stringify(data.json));
json2table("#html");
});
});
function call(a) {
$("#json").val(JSON.stringify(a, void 0, 2));
json2table()
}
function json2table(selector) {
$(selector).html(buildTable(getJsonVar()));
}
function getJsonVar() {
try {
var a = $.parseJSON($("#json").val());
$("#json").val(JSON.stringify(a, void 0, 2));
return a
} catch (e) {
//return $("#error_msg").text(e.message), $("#errorModal").modal("show"), {}
alert(e);
}
}
function buildTable(a) {
var e = document.createElement("table"),
d, b;
if (isArray(a)) return buildArray(a);
for (var c in a) "object" != typeof a[c] || isArray(a[c]) ? "object" == typeof a[c] && isArray(a[c]) ? (d = e.insertRow(-1), b = d.insertCell(-1), b.colSpan = 2, b.innerHTML = '<div class="td_head">' + encodeText(c) + '</div><table style="width:100%">' + $(buildArray(a[c]), !1).html() + "</table>") : (d = e.insertRow(-1), b = d.insertCell(-1), b.innerHTML = "<div class='td_head'>" + encodeText(c) + "</div>", d = d.insertCell(-1), d.innerHTML = "<div class='td_row_even'>" +
encodeText(a[c]) + "</div>") : (d = e.insertRow(-1), b = d.insertCell(-1), b.colSpan = 2, b.innerHTML = '<div class="td_head">' + encodeText(c) + '</div><table style="width:100%">' + $(buildTable(a[c]), !1).html() + "</table>");
return e
}
function buildArray(a) {
var e = document.createElement("table"),
d, b, c = !1,
p = !1,
m = {},
h = -1,
n = 0,
l;
l = "";
if (0 == a.length) return "<div></div>";
d = e.insertRow(-1);
for (var f = 0; f < a.length; f++)
if ("object" != typeof a[f] || isArray(a[f])) "object" == typeof a[f] && isArray(a[f]) ? (b = d.insertCell(h), b.colSpan = 2, b.innerHTML = '<div class="td_head"></div><table style="width:100%">' + $(buildArray(a[f]), !1).html() + "</table>", c = !0) : p || (h += 1, p = !0, b = d.insertCell(h), m.empty = h, b.innerHTML = "<div class='td_head'> </div>");
else
for (var k in a[f]) l =
"-" + k, l in m || (c = !0, h += 1, b = d.insertCell(h), m[l] = h, b.innerHTML = "<div class='td_head'>" + encodeText(k) + "</div>");
c || e.deleteRow(0);
n = h + 1;
for (f = 0; f < a.length; f++)
if (d = e.insertRow(-1), td_class = isEven(f) ? "td_row_even" : "td_row_odd", "object" != typeof a[f] || isArray(a[f]))
if ("object" == typeof a[f] && isArray(a[f]))
for (h = m.empty, c = 0; c < n; c++) b = d.insertCell(c), b.className = td_class, l = c == h ? '<table style="width:100%">' + $(buildArray(a[f]), !1).html() + "</table>" : " ", b.innerHTML = "<div class='" + td_class + "'>" + encodeText(l) +
"</div>";
else
for (h = m.empty, c = 0; c < n; c++) b = d.insertCell(c), l = c == h ? a[f] : " ", b.className = td_class, b.innerHTML = "<div class='" + td_class + "'>" + encodeText(l) + "</div>";
else {
for (c = 0; c < n; c++) b = d.insertCell(c), b.className = td_class, b.innerHTML = "<div class='" + td_class + "'> </div>";
for (k in a[f]) c = a[f], l = "-" + k, h = m[l], b = d.cells[h], b.className = td_class, "object" != typeof c[k] || isArray(c[k]) ? "object" == typeof c[k] && isArray(c[k]) ? b.innerHTML = '<table style="width:100%">' + $(buildArray(c[k]), !1).html() + "</table>" : b.innerHTML =
"<div class='" + td_class + "'>" + encodeText(c[k]) + "</div>" : b.innerHTML = '<table style="width:100%">' + $(buildTable(c[k]), !1).html() + "</table>"
}
return e
}
function encodeText(a) {
return $("<div />").text(a).html()
}
function isArray(a) {
return "[object Array]" === Object.prototype.toString.call(a)
}
function isEven(a) {
return 0 == a % 2
}
</script>`;
// In case you only want a specific property, change it here.
//
// Default: You can set the entire JSON response using pm.response.json()
let tableProps = {
json: object
};
pm.visualizer.set(template, tableProps);