Hello, I want to make a basic visual editor for my plugins.
let x = {
tag : "a",
atts : {
href : "/",
class : "a",
text:"link"
},
components:[
{
tag : "b",
atts : {
class : "a",
text:"asdsad"
},
components:[
//...
]
}
]
}
I have an js object like this. I want to get all “components” properties in this.
function render_blocks(blocks){
for (let i = 0; i < blocks.length; i++) {
const block = blocks[i];
let $block_html = $("<"+ block.tag +">",{...block.atts});
if(block.components){
for (let k = 0; k < block.components.length; k++) {
const block_comp = block.components[k];
let $block_html_comp = $("<"+ block_comp.tag +">",{...block_comp.atts});
$block_html.html($block_html.html()+$block_html_comp[0].outerHTML);
}
}
html = $block_html[0].outerHTML;
console.log(html);
}
}
I am using a this function to convert js blocks to html. However this func is very bad :P.
Please HELLLP…
-Edit: How can I scan nested components properties in my object? They may be a lot of. I am searching a efficient way.
Advertisement
Answer
You can use recursion
let x = {
tag: "a",
atts: {
href: "/",
class: "a",
text: "link"
},
components: [
{
tag: "b",
atts: {
class: "a",
text: "asdsad"
},
components: [{ last: "last" }]
}
]
};
let componentsArray = [];
function getComponents(obj) {
if (!obj.components) {
return;
}
componentsArray.push(obj.components);
obj.components.forEach(component => getComponents(component));
}
getComponents(x);
console.log("componentsArray ", componentsArray);