динамически создавать элементы из объекта

Question

У меня есть объект, который выглядит так

var nodes = [{
                'name': 'Test1',
                'address': 'Street 1',
                'zipcode': '1234',
                'city': 'Big City',
                'phone': '12345678',
                'email': 'test@test.com',
                'web': 'www.test.com'
            },
            {
                'name': 'Test12',
                'address': 'Street 5',
                'zipcode': '5678',
                'city': 'Bigger City',
                'phone': '89898989',
                'email': 'test2@test2.com',
                'web': 'www.test2.com'
            }
        ]

То, что я хочу, это циклически проходить через этот объект и динамически создавать элемент span с textNode из значения и использовать ключ для класса

var elm = document.createElement('span')
elm.appendChild(document.createTextNode(THEVALUE))
elm.setAttribute('class', THEKEY)
li.appendChild(elm)

В настоящее время я использую базовый цикл for, но я не уверен, что лучше всего извлечь только ключ

for (var i = 0; i < nodes.length; i++) {
   var elm = document.createElement('span')
   elm.appendChild(document.createTextNode(nodes[i]))
   li.appendChild(elm)
}

Ожидаемый результат будет

<span class="name">Test1</span>
<span class="address">Street 1</span>

Я использую ванильный JS

Answer 1

Это поможет вам.

var nodes = [{
                'name': 'Test1',
                'address': 'Street 1',
                'zipcode': '1234',
                'city': 'Big City',
                'phone': '12345678',
                'email': 'test@test.com',
                'web': 'www.test.com'
            },
            {
                'name': 'Test12',
                'address': 'Street 5',
                'zipcode': '5678',
                'city': 'Bigger City',
                'phone': '89898989',
                'email': 'test2@test2.com',
                'web': 'www.test2.com'
            }
        ];

var list = document.getElementById("list");
for (var i = 0, length=nodes.length; i < length; i++)
{
    var node = nodes[i];
    Object.keys(node).forEach(function(key){
        var elm = document.createElement('span');
        elm.appendChild(document.createTextNode(node[key]));
        elm.setAttribute('class', key)
        list.appendChild(elm);
    })
}

console.log(list.innerHTML)

<div id="list"></div>

Answer 2

Вы можете выполнить итерацию, используя Object.entries, чтобы получить и ключ, и значение одновременно. Когда единственным дочерним узлом элемента будет текстовый узел, его менее подробный и, вероятно, лучше присвоить textContent, чем явно создавать текстовый узел:

var nodes = [{
  'name': 'Test1',
  'address': 'Street 1',
  'zipcode': '1234',
  'city': 'Big City',
  'phone': '12345678',
  'email': 'test@test.com',
  'web': 'www.test.com'
  },
  {
  'name': 'Test12',
  'address': 'Street 5',
  'zipcode': '5678',
  'city': 'Bigger City',
  'phone': '89898989',
  'email': 'test2@test2.com',
  'web': 'www.test2.com'
  }
]
const ul = document.querySelector('ul');
nodes.forEach(node => {
  const li = ul.appendChild(document.createElement('li'));
  for (const [key, val] of Object.entries(node)) {
    const span = document.createElement('span');
    span.className = key;
    span.textContent = val;
    li.appendChild(span);
  }
});
console.log(ul.innerHTML);

<ul></ul>

Answer 3

, если вы хотите вывод, как

<span class="name">Test1</span>
<span class="address">Street 1</span>

тогда попробуйте это

for (var i = 0; i < nodes.length; i++) {
   for(var val in nodes[i]){
      var elem = document.createElement('span')
      elem.appendChild(document.createTextNode(nodes[i][val]))
      elem.className = val;
      console.log(elem)
   }
}

Answer 4

Вы должны использовать for...in для внутреннего цикла, это позволит вам перебирать свойства каждого узла:

for (var i = 0; i < nodes.length; i++) {
   var node = nodes[i];
   for(var key in node){
      var elm = document.createElement('span')
      elm.appendChild(document.createTextNode(node[key]))
      elm.className = key;
      li.appendChild(elm)
   }
}

Вот рабочий пример , хотя кажется немного странным, что вы хотите добавить все узлы к к одному элементу списка.