Chuyển JSON lồng vào danh sách lồng nhau HTML với Javascript

Tôi khá mới sử dụng JSON (trái với XML) và hiện đang làm việc hoàn toàn với Javascript để phân tích, phân tích cú pháp và hiển thị dữ liệu JSON đã trả về của tôi.Chuyển JSON lồng vào danh sách lồng nhau HTML với Javascript

Tôi đang sử dụng thư viện JSON2.js và đang được nhận lại một số dữ liệu JSON hợp lệ đại diện cho một danh sách lồng nhau khá đơn giản:

{ 
    "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" 
     } 
    } 
    } 
}

Có ai có bất kỳ con trỏ một cách nhanh chóng để biến nhiều đó vào một UL với tất cả các yếu tố lồng nhau? Nó cũng sẽ rất tuyệt nếu phần tử "class" trong JSON có thể được sử dụng làm lớp cho mỗi LI.

Bất kỳ trợ giúp nào được đánh giá cao.

Xin cảm ơn,

Dave.

Nguồn

2009-07-31 Dave Waller

FWIW: Tôi nghĩ có gì đó sai với JSON của bạn. Có một vài nơi mà bạn có nhiều nút "nút" trong cùng một đối tượng. –

Json của bạn không phù hợp với nhiệm vụ của bạn. Một số đối tượng có một số thuộc tính có cùng tên ("nút"), do đó chúng ghi đè nhau. Thay vào đó, bạn phải sử dụng các mảng của các nút. Dưới đây là một cấu trúc dữ liệu làm việc và chức năng mà có thể biến nó thành một danh sách lồng nhau:

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

Và tôi có thể thêm css này để có các mục numberings này trùng với tên nút :)

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

See it in action.

Nguồn

2009-07-31 10:38:00 Alsciende

Bạn có thể tự mình đi qua cấu trúc json của mình và tạo <li> thích hợp khi cần, nhưng tôi khuyên bạn nên triển khai Mẫu hỗn hợp. Xem link để biết thêm chi tiết

Nguồn

2009-07-31 10:27:42

Dưới đây là một số mã khá đơn giản tạo thành phần <ul> cho từng đối tượng và một phần tử <li> cho từng phần. Bạn có thể thêm kiểm tra nhanh để kiểm tra biến số child đối với những thứ như "class" nếu bạn muốn thêm trường hợp đặc biệt.

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); 
    } 
}

Điều này sẽ không thực hiện chính xác những gì bạn muốn, vì JSON của bạn không có ý nghĩa. Các đối tượng trong JavaScript, và do đó JSON, là các bản đồ, và do đó bạn không thể có nhiều hơn một đứa trẻ có cùng tên. Bạn sẽ cần phải biến nhiều "nút" của bạn thành một mảng, như Cédric chỉ ra.

Nguồn

2009-07-31 10:43:34

Chuyển JSON lồng vào danh sách lồng nhau HTML với Javascript

Trả lời

Các vấn đề liên quan