javascript - 对象未按预期呈现

Question

我需要一个对象以树状结构呈现。例如，如果一个对象包含一个对象，则它必须是父对象的子对象。这是代码笔链接: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);