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

Question

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

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

// 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 在这里提供:https://jsfiddle.net/y4qdknb1/1/

结果:

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

我真正想要的:

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

Answer 1

您需要使用容器而不是$divParent

问题更新后

创建新的元素并始终将其附加到当前容器，之后检查是否有任何子元素并将它们附加到该元素

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>