Question

我需要一个对象来呈现树状结构。例如，如果一个对象包含一个对象，则它必须是父对象的子对象。这是codepen链接：Render object recursively。

var object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': {
    'childKey1': 'childValue1',
    'childKey2': 'childValue2',
    'childKey3': {
      'subChildKey1': 'subChildValue1',
      'subChildKey2': 'subChildValue2',
      'subChildKey3': 'subChildValue3',
    }
  }
};

function parseObject(obj, element='') {
  var keyValue = Object.entries(obj);
  var div = document.getElementById('container');  
  var ul = document.createElement('ul');
  var li;

  keyValue.forEach(function(key) {
    li = document.createElement('li');
    li.innerText = key[0];
    ul.appendChild(li);
    if (element) {
      element.appendChild(ul);
    }
    if (typeof(key[1]) === 'object') {
      parseObject(key[1], li);
      return;
    }
    div.appendChild(ul);
  });
}

parseObject(object);

TIA。

Answer 1

您可以递归构造整个字符串，并使用innerHTML将其添加到div中。这可能更有效

var object = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': {
    'childKey1': 'childValue1',
    'childKey2': 'childValue2',
    'childKey3': {
      'subChildKey1': 'subChildValue1',
      'subChildKey2': 'subChildValue2',
      'subChildKey3': 'subChildValue3',
    }
  }
};


function createTree(obj) {
  return "<ul>" + 
    Object.getOwnPropertyNames(obj).map(function(key) {
      var val = obj[key];
      if (typeof val === "string") {
        return "<li>" + key + "</li>";
      }
      return "<li>" + key + createTree(val) + "</li>";
    }).join("");
    + "<ul>";
}

document.getElementById('container').innerHTML = createTree(object);

Answer 2

我在项目中使用了此解析器。它期望一个对象（或数组）作为参数，并返回一个有序列表（带有子列表）。您只需要将结果附加到容器中即可。

function parseObject(obj){
  try{
    const element = document.createElement("OL");
    const keys = Object.keys(obj);

    if(keys.length  == 0){
      return document.createTextNode("(Empty object/array)");
    }

    for(let kindex in keys){
      const key = keys[kindex]
      const elem = obj[key];
      const line = document.createElement("LI");
      if(elem == null){
        line.appendChild(createTextNode("null"));
      }else if(elem == undefined){
        line.appendChild(createTextNode("undefined"));
      }else if(typeof elem == "object"){
        line.appendChild(document.createTextNode(key + ": "));
        line.appendChild(parseObject(elem));
      }else{
        line.innerHTML = key + ": " + elem;
      }
      element.appendChild(line);
    }

    return element;
  }catch(err){
    alert(arguments.callee.name + " - " + err.name + ": " + err.message, "error");
  }
}

对象未按预期呈现

2 个答案: