將非嵌套 JSON 數組解析為 HTML 樹視圖？

Question

我正在通過 JSON 從數據庫中檢索數據，因此數據會不斷變化； 我無法對 JSON 進行硬編碼。 下面是一些示例 JSON 來說明此示例：

[{"Building":"18A","Room":219,"Location":"E-4-6","BarCode":"P000019152"}, 
 {"Building":"18G","Room":"112HALL","Location":"J-8-5","BarCode":"P000031111"}, 
 {"Building":"18G","Room":"112HALL","Location":"J-8-5","BarCode":"P166279435"}, 
 {"Building":"18G","Room":"112HALL","Location":"A-10-7","BarCode":"P352831849"}, 
 {"Building":"18G","Room":"5P04","Location":"C-4-10","BarCode":"P726526379"}, 
 {"Building":"18C","Room":"6THST","Location":"CAGE14","BarCode":"P000453262"}, 
 {"Building":"18C","Room":"6THST","Location":"CAGE13","BarCode":"P954732810"}]

我需要做的是解析這個數組並從中創建一個樹視圖。 從上面看，樹視圖看起來像這樣：

>18A
  >219
    >E-4-6
       >P000019152
>18G
  >112HALL
    >J-8-5
       >P000019152
       >P166279435
    >A-10-7
       >P166279435
  >5P04
    >C-4-10
       >P726526379
>18C
  >6THST
     >CAGE14
        >P000453262
     >CAGE13
        >P954732810

需要注意的重要一點是我的 JSON 沒有以存在父對象和子對象的方式構建； 換句話說，它不是嵌套的。 有什么方法可以解析這個 JSON 字符串並根據建築物、房間、位置和條形碼的順序，從中創建一個邏輯和分層的樹視圖？

到目前為止我嘗試過的：

 var input=[{"Building":"18A","Room":"219","Location":"E-4-6","BarCode":"P000019152"}, 
 {"Building":"18G","Room":"112HALL","Location":"J-8-5","BarCode":"P000031111"}, 
 {"Building":"18G","Room":"112HALL","Location":"J-8-5","BarCode":"P166279435"}, 
 {"Building":"18G","Room":"112HALL","Location":"A-10-7","BarCode":"P352831849"}, 
 {"Building":"18G","Room":"5P04","Location":"C-4-10","BarCode":"P726526379"}, 
 {"Building":"18C","Room":"6THST","Location":"CAGE14","BarCode":"P000453262"},
 {"Building":"18C","Room":"6THST","Location":"C1","BarCode":"P954732810"}];

function ToNestedObject(input){
    var i, y, len = input.length, parts, partsLen, obj = {}, prev;
    for(i = 0; i < len; i++){
        parts = input[i]; 
        partsLen = parts.length;
        prev = obj; 
        for(y = 0; y < partsLen; y++){
            prev[parts[y]] = prev[parts[y]] || {};    
            prev = prev[parts[y]];
        }
        if(!prev.ids){
            prev.ids = []; 
        }
        prev.ids.push(input[i].id); 
    }
    return obj; 
}

function ToHTML(input){
    var html = '<ul>'; 

    for(var key in input){
        if(input[key] instanceof Array){
            for(var i = 0; i < input[key].length; i++){
                html += '<li>' + input[key][i] + '</li>';
            }
        } else {
            html += '<li>' + key + ToHTML(input[key]) + '</li>';
        }           
    }
    html += '</ul>';
    return html; 
}
document.getElementById('test').innerHTML = ToHTML(ToNestedObject(input)); 

Answer 1

您可以首先使用遞歸創建嵌套結構，然后從該數據創建帶有ul和li元素的 html。

 const data = [{"Building":"18A","Room":219,"Location":"E-4-6","BarCode":"P000019152"}, {"Building":"18G","Room":"112HALL","Location":"J-8-5","BarCode":"P000031111"}, {"Building":"18G","Room":"112HALL","Location":"J-8-5","BarCode":"P166279435"}, {"Building":"18G","Room":"112HALL","Location":"A-10-7","BarCode":"P352831849"}, {"Building":"18G","Room":"5P04","Location":"C-4-10","BarCode":"P726526379"}, {"Building":"18C","Room":"6THST","Location":"CAGE14","BarCode":"P000453262"}, {"Building":"18C","Room":"6THST","Location":"CAGE13","BarCode":"P954732810"}] const order = ['Building', 'Room', 'Location', 'BarCode']; function nest(data, keys) { return data.reduce((result, e) => { keys.reduce((r, k, a, i) => { return r[e[k]] = (r[e[k]] || {}) }, result) return result; }, {}) } function toHtml(data, parent) { const ul = document.createElement('ul'); Object.keys(data).forEach(key => { const li = document.createElement('li'); li.textContent = key; li.appendChild(toHtml(data[key], li)) ul.appendChild(li) }) return ul; } const result = nest(data, order); const html = toHtml(result); document.body.appendChild(html)

Answer 2

為了讓您開始，您可以使用遍歷鍵的數組和層次結構將對象數組轉換為嵌套的對象層次結構。 這是一個 1-liner：

 let values = [ { "Building": "18A", "Room": 219, "Location": "E-4-6", "BarCode": "P000019152" }, { "Building": "18G", "Room": "112HALL", "Location": "J-8-5", "BarCode": "P000031111" }, { "Building": "18G", "Room": "112HALL", "Location": "J-8-5", "BarCode": "P166279435" }, { "Building": "18G", "Room": "112HALL", "Location": "A-10-7", "BarCode": "P352831849" }, { "Building": "18G", "Room": "5P04", "Location": "C-4-10", "BarCode": "P726526379" }, { "Building": "18C", "Room": "6THST", "Location": "CAGE14", "BarCode": "P000453262" }, { "Building": "18C", "Room": "6THST", "Location": "CAGE13", "BarCode": "P954732810" }]; let hierarchy = ['Building', 'Room', 'Location', 'BarCode']; let output = {}; values.forEach(v => hierarchy.reduce((o, h) => o[v[h]] = o[v[h]] || {}, output)); console.log(output);