62 lines
2.0 KiB
JavaScript
62 lines
2.0 KiB
JavaScript
function jsonToHtml(data, container) {
|
|
const title = container.querySelector("h3");
|
|
container.innerHTML = "";
|
|
if (title) container.appendChild(title);
|
|
const contentDiv = document.createElement("div");
|
|
container.appendChild(contentDiv);
|
|
|
|
function buildTree(d, parent) {
|
|
if (typeof d !== "object" || d === null) {
|
|
parent.textContent = String(d);
|
|
return;
|
|
}
|
|
const ul = document.createElement("ul");
|
|
ul.className = "json-tree";
|
|
const entries = Array.isArray(d) ? d.map((v, i) => [i, v]) : Object.entries(d);
|
|
entries.forEach(([k, v]) => {
|
|
const li = document.createElement("li");
|
|
if (typeof v === "object" && v !== null) {
|
|
const details = document.createElement("details");
|
|
details.open = true;
|
|
const summary = document.createElement("summary");
|
|
summary.textContent = k;
|
|
details.appendChild(summary);
|
|
const childUl = document.createElement("ul");
|
|
childUl.className = "json-tree";
|
|
buildTree(v, childUl);
|
|
details.appendChild(childUl);
|
|
li.appendChild(details);
|
|
} else {
|
|
li.textContent = `${k}: ${v}`;
|
|
}
|
|
ul.appendChild(li);
|
|
});
|
|
parent.appendChild(ul);
|
|
}
|
|
buildTree(data, contentDiv);
|
|
}
|
|
|
|
let lastSerialData = null, lastTargetData = null;
|
|
|
|
async function fetchAndDisplayJsonWithTree(id, url) {
|
|
const parent = document.getElementById(id + "-container");
|
|
const cont = document.getElementById(id);
|
|
try {
|
|
parent.classList.add("json-updating");
|
|
const res = await fetch(url);
|
|
if (!res.ok) throw new Error(res.statusText);
|
|
const data = await res.json();
|
|
|
|
const prev = id === "json-serial" ? lastSerialData : lastTargetData;
|
|
if (JSON.stringify(data) !== JSON.stringify(prev)) {
|
|
jsonToHtml(data, cont);
|
|
if (id === "json-serial") lastSerialData = data;
|
|
else lastTargetData = data;
|
|
}
|
|
} catch (e) {
|
|
console.warn(`请求失败(${url}): ${e.message}`);
|
|
} finally {
|
|
parent.classList.remove("json-updating");
|
|
}
|
|
}
|