중첩 JSON을 JavaScript와 함께 HTML 중첩 목록으로 바꾸는
-
06-07-2019 - |
문제
저는 JSON을 사용하는 데 익숙하지 않으며 (XML과 달리) 현재 순수한 JavaScript와 함께 작동하여 반환 된 JSON 데이터를 소화, 구문 분석 및 표시하고 있습니다.
JSON2.JS 라이브러리를 사용하고 있으며 상당히 간단한 중첩 목록을 나타내는 유효한 JSON 데이터를 되찾고 있습니다.
{
"node":{
"class":"folder",
"title":"Test Framework",
"node":{
"class":"folder",
"title":"Item 1",
"node":{
"class":"folder",
"title":"Item 1.1",
"node":{
"class":"file",
"title":"Item 1.1.a"
}
},
"node":{
"class":"folder",
"title":"Item 1.2",
"node":{
"class":"file",
"title":"Item 1.2.a"
},
"node":{
"class":"file",
"title":"Item 1.2.b"
},
"node":{
"class":"file",
"title":"Item 1.2.c"
}
},
"node":{
"class":"folder",
"title":"Item 1.3",
"node":{
"class":"folder",
"title":"Item 1.3.a",
"node":{
"class":"file",
"title":"Item 1.3.a.i"
},
"node":{
"class":"file",
"title":"Item 1.3.a.ii"
}
}
}
},
"node":{
"class":"folder",
"title":"Item 2",
"node":{
"class":"file",
"title":"item 2.a"
},
"node":{
"class":"file",
"title":"Item 2.b"
}
}
}
}
누구든지 모든 중첩 요소와 함께 그 부지를 UL로 바꾸는 빠른 방법을위한 포인터가 있습니까? JSON에있는 "클래스"요소가 각 LI의 클래스로 사용될 수 있다면 멋질 것입니다.
모든 도움은 대단히 감사합니다.
감사,
데이브.
해결책
JSON은 귀하의 작업에 적합하지 않습니다. 일부 객체에는 동일한 이름 ( "노드")을 가진 여러 속성이 있으므로 서로를 대체합니다. 대신 노드 배열을 사용해야합니다. 다음은 작동하는 데이터 구조와 중첩 목록으로 전환 할 수있는 기능입니다.
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function parseNodes(nodes) { // takes a nodes array and turns it into a <ol>
var ol = document.createElement("OL");
for(var i=0; i<nodes.length; i++) {
ol.appendChild(parseNode(nodes[i]));
}
return ol;
}
function parseNode(node) { // takes a node object and turns it into a <li>
var li = document.createElement("LI");
li.innerHTML = node.title;
li.className = node.class;
if(node.nodes) li.appendChild(parseNodes(node.nodes));
return li;
}
window.jsonData = [{
"class": "folder",
"title": "Test Framework",
"nodes": [{
"class": "folder",
"title": "Item 1",
"nodes": [{
"class": "folder",
"title": "Item 1.1",
"nodes": [{
"class": "file",
"title": "Item 1.1.a"
}]
},
{
"class": "folder",
"title": "Item 1.2",
"nodes": [{
"class": "file",
"title": "Item 1.2.a"
},
{
"class": "file",
"title": "Item 1.2.b"
},
{
"class": "file",
"title": "Item 1.2.c"
}]
},
{
"class": "folder",
"title": "Item 1.3",
"nodes": [{
"class": "folder",
"title": "Item 1.3.a",
"nodes": [{
"class": "file",
"title": "Item 1.3.a.i"
},
{
"class": "file",
"title": "Item 1.3.a.ii"
}]
}]
}]
},
{
"class": "folder",
"title": "Item 2",
"nodes": [{
"class": "file",
"title": "item 2.a"
},
{
"class": "file",
"title": "Item 2.b"
}]
}]
}];
</script>
</head>
<body>
<input type="button"
onclick="document.body.appendChild(parseNodes(jsonData))"
value="go" />
</body>
</html>
그리고이 CSS를 추가하여 항목 번호가 노드 제목과 일치하도록 할 수 있습니다 :)
<style type="text/css">
ol { list-style-type: none }
ol ol { list-style-type: decimal }
ol ol ol { list-style-type: decimal }
ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol { list-style-type: lower-roman }
</style>
다른 팁
다음은 a를 작성하는 상당히 간단한 코드입니다 <ul>
각 객체에 대한 요소, a <li>
각 부분에 대한 요소. 빠른 점검을 추가하여 테스트 할 수 있습니다 child
같은 것들에 대한 변수 "class"
특별한 케이스를 추가하려면.
function jsonToHtmlList(json) {
return objToHtmlList(JSON.parse(json));
}
function objToHtmlList(obj) {
if (obj instanceof Array) {
var ol = document.createElement('ol');
for (var child in obj) {
var li = document.createElement('li');
li.appendChild(objToHtmlList(obj[child]));
ol.appendChild(li);
}
return ol;
}
else if (obj instanceof Object && !(obj instanceof String)) {
var ul = document.createElement('ul');
for (var child in obj) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(child + ": "));
li.appendChild(objToHtmlList(obj[child]));
ul.appendChild(li);
}
return ul;
}
else {
return document.createTextNode(obj);
}
}
JSON이 말이되지 않기 때문에 이것은 당신이 원하는 것을 정확하게 수행하지 않습니다. JavaScript의 객체, 따라서 JSON은지도이므로 같은 이름을 가진 아이를 둘 이상 가질 수 없습니다. Cédric이 지적한 것처럼 여러 "노드"를 배열로 바꿔야합니다.
JSON 구조를 혼자서 걸어 가서 적절한 <li>
필요할 때는 복합 패턴을 구현하는 것이 좋습니다. 보다 링크 자세한 사항은