dynamically create elements from object

Question

I have an object that looks like this

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

What I want is to loop through this object and dynamically create a span element with a textNode from the value, and use the key for a class

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

Currrently I am using a basic for-loop, but I am not sure about the best way to extract the key only

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

The expected result would be

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

I am using vanilla JS

What is the expected output like? What do you mean, class? <span class="name">Test</span><span class="address"... or what? — CertainPerformance
– CertainPerformance, Commented Jun 28, 2018 at 8:21

musefan · Accepted Answer · 2018-06-28 08:29:39Z

2

You should use for...in for the inner loop, this will let you iterate through the properties of each node:

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

Here is a working example, although it seems a bit strange that you want to append all the nodes to the same list item.

edited Jun 28, 2018 at 8:29

answered Jun 28, 2018 at 8:22

musefan

48.5k21 gold badges144 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CertainPerformance · Accepted Answer · 2018-06-28 08:26:44Z

You can iterate using Object.entries to get both the key and the value at once. When the only child node of an element is going to be a text node, it's less verbose and probably better to assign to textContent than to create a text node explicitly:

var nodes = [{
  'name': 'Test1',
  'address': 'Street 1',
  'zipcode': '1234',
  'city': 'Big City',
  'phone': '12345678',
  'email': '[email protected]',
  'web': 'www.test.com'
  },
  {
  'name': 'Test12',
  'address': 'Street 5',
  'zipcode': '5678',
  'city': 'Bigger City',
  'phone': '89898989',
  'email': '[email protected]',
  '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>

Aravind S · Accepted Answer · 2018-06-28 08:27:48Z

0

if you want the output like

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

then try this

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

answered Jun 28, 2018 at 8:27

Aravind S

2,3952 gold badges15 silver badges21 bronze badges

Comments

Vignesh Raja · Accepted Answer · 2018-06-28 08:34:02Z

This will help you out.

var nodes = [{
                'name': 'Test1',
                'address': 'Street 1',
                'zipcode': '1234',
                'city': 'Big City',
                'phone': '12345678',
                'email': '[email protected]',
                'web': 'www.test.com'
            },
            {
                'name': 'Test12',
                'address': 'Street 5',
                'zipcode': '5678',
                'city': 'Bigger City',
                'phone': '89898989',
                'email': '[email protected]',
                '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>

Collectives™ on Stack Overflow

dynamically create elements from object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related