>

루핑하고 각 객체로 html 블록을 작성하는 json 객체가 있습니다. 나는 지금까지 잘 작동했지만 자식 항목이 자체 부모 컨테이너에 있지 않은 문제가 있습니다. 또한 최상위 항목을 상위 컨테이너에 포함하고 싶지 않습니다.

도움과 조언은 대단히 감사하겠습니다.

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


  • 답변 # 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>
    
    

  • 이전 javascript - 클릭시 대상 범위를 변경하는 방법
  • 다음 pandas - 파이썬에서 집계 된 데이터에 대한 기술 통계