[英]Recursion in javascript to build HTML with children that have a single parent element
I have a json object that I am looping over and building html blocks with each object. 我有一个json对象,我正在遍历该对象并与每个对象建立html块。 I have got this to work fine so far but I am having issues with the child items not being in its own parent container.
到目前为止,我已经可以正常工作了,但是子项不在自己的父容器中时遇到了问题。 I also don't want the top level items to be contained in a parent container.
我也不希望顶级项目包含在父容器中。
Any help and advice would be greatly appreciated. 任何帮助和建议,将不胜感激。
// test json data var jsonTest = { "myJson": [ { "type": "link", "navigationIndex": 0, "formData": { "label": "link", "url": "https://www.google.com" }, "childItems": [ { "type": "column", "navigationIndex": 0, "formData": { "label": "column 1" }, "childItems": [] }, { "type": "column", "navigationIndex": 1, "formData": { "label": "column 2" }, "childItems": [] }, { "type": "column", "navigationIndex": 2, "formData": { "label": "column 3" }, "childItems": [] }, { "type": "column", "navigationIndex": 3, "formData": { "label": "column 4", }, "childItems": [] }] }] }; // main build function function buildFromJson() { var jsonData = jsonTest.myJson; appendDom($(".root"), jsonData); } // html templates function getLinkContainer(type, label, url) { var element = ` <div class="element" data-item-type="${type}"> <a href="${url}">${label}</a> </div> `; return element; }; function getColumnContainer(type, label) { var element = ` <div class="element" data-item-type="${type}"> ${label} </div> `; return element; } // recursion to get all data function appendDom(container, jsonData) { for (var i = 0; i < jsonData.length; i++) { var $divParent = $("<div class='parent'></div>"); if(jsonData[i].type == "link") { var url = jsonData[i].formData.url; var label = jsonData[i].formData.label; var type = jsonData[i].type; $divParent.append(getLinkContainer(type, label, url)); } else if(jsonData[i].type == "column") { var label = jsonData[i].formData.label; var type = jsonData[i].type; $divParent.append(getColumnContainer(type, label)); } // get the children if (jsonData[i].childItems) { appendDom($divParent, jsonData[i].childItems); } container.append($divParent); } } // build it! buildFromJson();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="root"> </div>
jsfiddle provided here: https://jsfiddle.net/y4qdknb1/1/ 此处提供jsfiddle: https ://jsfiddle.net/y4qdknb1/1/
Results: 结果:
<div class="root">
<div class="parent">
<div class="element" data-item-type="link">
<a href="https://www.google.com">link</a>
</div>
<div class="parent">
<div class="element" data-item-type="column">
column 1
</div>
</div>
<div class="parent">
<div class="element" data-item-type="column">
column 2
</div>
</div>
<div class="parent">
<div class="element" data-item-type="column">
column 3
</div>
</div>
<div class="parent">
<div class="element" data-item-type="column">
column 4
</div>
</div>
</div>
</div>
What I actually want: 我真正想要的是:
<div class="root">
<div class="element" data-item-type="link">
<a href="https://www.google.com">link</a>
<div class="parent">
<div class="element" data-item-type="column">
column 1
</div>
<div class="element" data-item-type="column">
column 2
</div>
<div class="element" data-item-type="column">
column 3
</div>
<div class="element" data-item-type="column">
column 4
</div>
</div>
</div>
</div>
You need to use the container not the $divParent 您需要使用容器而不是$ divParent
AFTER QUESTION UPDATE 问题更新后
Create new element and always append it to current container , after that check if there is any children and append them to that element 创建新元素并将其始终附加到当前容器中 ,然后检查是否有任何子元素并将其附加到该元素中
var jsonTest = { "myJson": [ { "type": "link", "navigationIndex": 0, "formData": { "label": "link", "url": "https://www.google.com" }, "childItems": [ { "type": "column", "navigationIndex": 0, "formData": { "label": "column 1" }, "childItems": [] }, { "type": "column", "navigationIndex": 1, "formData": { "label": "column 2" }, "childItems": [] }, { "type": "column", "navigationIndex": 2, "formData": { "label": "column 3" }, "childItems": [] }, { "type": "column", "navigationIndex": 3, "formData": { "label": "column 4", }, "childItems": [] }] }] }; // main build function function buildFromJson() { var jsonData = jsonTest.myJson; appendDom($(".root"), jsonData); } // html templates function getLinkContainer(type, label, url) { var element = ` <div class="element" data-item-type="${type}"> <a href="${url}">${label}</a> </div> `; return element; } ; function getColumnContainer(type, label) { var element = ` <div class="element" data-item-type="${type}"> ${label} </div> `; return element; } // recursion to get all data function appendDom(container, jsonData) { for (var i = 0; i < jsonData.length; i++) { if (jsonData[i].type == "link") { var url = jsonData[i].formData.url; var label = jsonData[i].formData.label; var type = jsonData[i].type; var element = $(getLinkContainer(type, label, url)); } else if (jsonData[i].type == "column") { var label = jsonData[i].formData.label; var type = jsonData[i].type; var element = $(getColumnContainer(type, label)); } container.append(element); // get the children if (jsonData[i].childItems) { var $divParent = $("<div class='parent'></div>"); $(element).append($divParent); appendDom($divParent, jsonData[i].childItems); } } } // build it! buildFromJson();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="root"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.