将非嵌套的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

首先，您可以使用iterate遍历键的数组和层次结构，将对象数组转换为嵌套的对象层次结构。这是一个1行代码：

​

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

​