javascript 中的递归以使用具有单个父元素的子元素构建 HTML

Question

我有一个 json 对象，我正在循环它并使用每个对象构建 html 块。到目前为止，我已经让它正常工作，但是我遇到了子项不在其自己的父容器中的问题。我也不希望顶级项目包含在父容器中。

任何帮助和建议将不胜感激。

// 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;

}