我今天來找你，我試圖從 javascript 中的 json 檔案制作一個 html 生成器。問題是在某個時刻孩子“appendChild”到前一個元素而不是“appendChild”到父元素
這是我的代碼：
$(document).ready(function(){
$.getJSON('THE JSON FILE FROM URL', function(data){
const components = data.htmlComponents.tableSuiviCommandes.components;
createHtmlFromJson(components)
}).fail(function( jqxhr, textStatus, error ) {
var err = textStatus ", " error;
console.log( "Request Failed: " err );
});
function createHtmlFromJson(json, parent){
json.forEach(jsonElement => {
// log("jsonElemement", jsonElement)
createdElement = document.createElement(jsonElement.balise);
if(jsonElement.content) createdElement.innerHTML = jsonElement.content;
jsonElement.attributes?.forEach(element => {
createdElement.setAttribute(element.name, element.content);
});
if(!parent){
document.body.appendChild(createdElement);
}else {
parent.appendChild(createdElement);
}
jsonElement.childs?.forEach(element => {
let theParent = createdElement;
if(element != typeof Array) element = [element];
createHtmlFromJson(element, theParent);
});
});
}
function log(name, value){
console.log("----------");
console.log(name);
console.log(value);
console.log("----------")
}
});
json檔案：
{
"htmlComponents": {
"tableSuiviCommandes": {
"components": [
{
"balise": "div",
"attributes": [
{
"name": "class",
"content": "containerTable"
}
],
"childs": [
{
"balise": "table",
"childs": [
{
"balise": "thead",
"childs": [
{
"balise": "tr",
"childs": [
{
"balise": "th",
"content": "Id"
},
{
"balise": "th",
"content": "Statut"
},
{
"balise": "th",
"content": "Voir la demande"
},
{
"balise": "th",
"content": "Objet"
},
{
"balise": "th",
"content": "Projet/Application"
},
{
"balise": "th",
"content": "Demandeur(s)"
},
{
"balise": "th",
"content": "Site"
},
{
"balise": "th",
"content": "Expression de besoin"
},
{
"balise": "th",
"content": "Référence interne"
},
{
"balise": "th",
"content": "CDC retenu"
},
{
"balise": "th",
"content": "N°Cotation"
},
{
"balise": "th",
"content": "N°Devis"
},
{
"balise": "th",
"content": "Date devis"
},
{
"balise": "th",
"content": "N°DEMAP"
},
{
"balise": "th",
"content": "N°CMD"
},
{
"balise": "th",
"content": "N°GAFI"
},
{
"balise": "th",
"content": "Date prévisionnelle de livraison"
},
{
"balise": "th",
"content": "Date de livraison"
},
{
"balise": "th",
"content": "Commentaire"
}
]
}
]
},
{
"balise": "tbody",
"attributes": [
{
"name": "id",
"content": "tableauSuivi"
}
]
}
]
}
]
}
]
}
}
}
html生成：
我嘗試使用除錯器一步一步制作，但我真的不明白為什么 theParent 不是真正的父母，所以孩子是前一個元素的孩子
uj5u.com熱心網友回復：
// You try this code
$(document).ready(function () {
createHtmlFromJson(JSON.parse(json).htmlComponents.tableSuiviCommandes.components)
function createHtmlFromJson(json, parent) {
// console.log(json);
json.forEach(jsonElement => {
// log("jsonElemement", jsonElement)
createdElement = document.createElement(jsonElement.balise);
if (jsonElement.content) createdElement.innerHTML = jsonElement.content;
jsonElement.attributes?.forEach(element => {
createdElement.setAttribute(element.name, element.content);
});
if (!parent) {
document.body.appendChild(createdElement);
} else {
parent.appendChild(createdElement);
}
let theParent = createdElement;
jsonElement.childs?.forEach(element => {
// console.log(createdElement);
if (element != typeof Array) element = [element];
// console.log(theParent);
createHtmlFromJson(element, theParent);
});
});
}
});
uj5u.com熱心網友回復：
我建議將創建單個 HTML 元素的邏輯提取到單獨的函式中。它可以在理解方面簡化事情。這是一個createElement基于您的函式的createHtmlFromJson函式，但它只創建單個元素（當然還有它的所有子元素）并回傳它：
function createElement(component) {
const el = document.createElement(component.balise);
if (component.content) {
const text = document.createTextNode(component.content);
el.appendChild(text);
}
component.attributes?.forEach((attr) => {
el.setAttribute(attr.name, attr.content);
});
component.childs?.forEach((child) => {
// Create all of its children and append them to this element
el.appendChild(createElement(child));
});
return el;
}
現在您可以根據您的 JSON 創建一個 HTML 元素陣列，如下所示：
const { components } = data.htmlComponents.tableSuiviCommandes;
// Transform each object into the actual HTML element via `.map()`
const arrayOfHTMLElements = components.map(createElement);
然后你可以將它附加到 DOM 中，如下所示：
arrayOfHTMLElements.forEach((element) => {
document.body.appendChild(element);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/525534.html