CODEWITHSUNDEEP
javascripthtmlobjectfor-loop
Morten Hagh
Morten Hagh

Reputation: 2113

dynamically create elements from object

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

Upvotes: 0

Views: 62

Answers (4)

Vignesh Raja
Vignesh Raja

Reputation: 8751

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>

Upvotes: 0

musefan
musefan

Reputation: 48415

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.

Upvotes: 2

Aravind S
Aravind S

Reputation: 2395

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

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370689

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>

Upvotes: 1

Related Questions