JavaScript: Append object properties as child elements

Question

I have an array of object and I'm trying to create HTML elements for each object and for each object's property, but got stuck, when I try to loop through containerDiv and appending object's properties as children elements.

I want to create a div for each object with the class name of containerDiv;
I want to loop through containerDiv;
I want to create an element for each object property and append them as children elements to containerDiv;

My code sample looks like this:

var parent = document.getElementById('parent');

function createHTMLElements() {
    for(var i = 0; i < arrayOfObjects.length; i++) {
        var containerDiv = document.createElement('div');
        containerDiv.className = 'container';
        parent.appendChild(containerDiv);

        // Loop through containerDiv and append object properties as child elements
    }
}

var arrayOfObjects = [
    {
        name: 'John',
        surname: 'Doe'
    },
    {
        name: 'David',
        surname: 'Mills'
    }
]

I'm trying to switch to Vanilla JS. I want to understand it well. I know jQuery is a lot easier, but I prefer this way :) — Beka Somkhishvili, Aug 19 '17 at 14:03
jQuery has its own troubles. Better off sticking with Vanilla these days unless you're supporting really old browsers. — spanky, Aug 19 '17 at 14:05

score 0 · Answer 1 · answered Aug 19 '17 at 13:54

You can create the child element using same document.cretateElement . Also you need to call the function

var arrayOfObjects = [{
    name: 'John',
    surname: 'Doe'
  },
  {
    name: 'David',
    surname: 'Mills'
  }
]
var parent = document.getElementById('parent');

function createHTMLElements() {
  for (var i = 0; i < arrayOfObjects.length; i++) {
    var containerDiv = document.createElement('div');
    containerDiv.className = 'container';
    var nameDiv = document.createElement('div');
    var surnameDiv = document.createElement('div');
    nameDiv .innerHTML = arrayOfObjects[i].name;
    surnameDiv .innerHTML = arrayOfObjects[i].surname;
    containerDiv.append(nameDiv );
    containerDiv.append(surnameDiv);
    parent.appendChild(containerDiv);

  }
}
createHTMLElements()

<div id="parent"></div>

Thank you so much. This is exactly what I needed. The way I was trying to achieve the same result was way more complicated. — Beka Somkhishvili, Aug 19 '17 at 14:07

spanky · Accepted Answer · 2017-08-19T14:41:18.280

All you need is a loop over the current object in the array.

for (var p in arrayOfObjects[i]) {
  containerDiv.appendChild(document.createElement("p"))
    .textContent = p + ": " + arrayOfObjects[i][p];
}

DEMO:

var parent = document.getElementById('parent');

var arrayOfObjects = [{
    name: 'John',
    surname: 'Doe'
  },
  {
    name: 'David',
    surname: 'Mills'
  }
];

createHTMLElements();

function createHTMLElements() {
  for (var i = 0; i < arrayOfObjects.length; i++) {
    var containerDiv = document.createElement('div');
    containerDiv.className = 'container';
    parent.appendChild(containerDiv);


    for (var p in arrayOfObjects[i]) {
      containerDiv.appendChild(document.createElement("p"))
        .textContent = p + ": " + arrayOfObjects[i][p];
    }
  }
}

.container {
  border: 2px dashed #333;
  margin: 4px;
}

.container>p {
  margin: 10px;
  padding: 5px;
  background: #DDD;
}

<div id=parent></div>

Here's a demo that doesn't use a loop but uses a helper function to make cleaner code.

var parent = document.getElementById('parent');

var arrayOfObjects = [{
    name: 'John',
    surname: 'Doe'
  },
  {
    name: 'David',
    surname: 'Mills'
  }
];

createHTMLElements();

function createHTMLElements() {
  for (var i = 0; i < arrayOfObjects.length; i++) {
    var containerDiv = create('div', {className: "container"}, parent);
    
    var obj = arrayOfObjects[i];
    create("p", {textContent: "name: " + obj.name}, containerDiv);
    create("p", {textContent: "surname: " + obj.surname}, containerDiv);
  }
}

function create(type, props, parent) {
  var el = document.createElement(type);
  for (var p in props) {
    el[p] = props[p];
  }
  if (parent) {
    parent.appendChild(el);
  }
  return el;
}

.container {
  border: 2px dashed #333;
  margin: 4px;
}

.container>p {
  margin: 10px;
  padding: 5px;
  background: #DDD;
}

<div id=parent></div>

Your answer is also great. Can you please explain what's going on in second for loop? for (var p in arrayOfObjects[i]) — Beka Somkhishvili, Aug 19 '17 at 14:10
@BekaSomkhishvili: That's just a loop over the current object in the array. It visits each property of the object one at a time, and assigns the current `key` the the variable `p`. So then we just create a new `
` element, add it to the `containerDiv`, and the `
` element's `.textContent` to the key `p`, as well as the value of `p` in the object `arrayOfObjects[i][p]`. — spanky, Aug 19 '17 at 14:32
If you don't want a loop, then I'd suggest creating a helper function so you're not writing repetitive code. — spanky, Aug 19 '17 at 14:33

Peter Seliger · Answer 3 · 2017-08-19T15:56:26.240

This is a more generic and structured approach. Refactoring becomes more easy for it provides methods for each special "create and append" task. Making use of reduce as list iterator method comes with the advantage of staying more flexible with e.g. what kind of "container" to choose by providing kind of a configuration to each "container" creating process.

var objectList = [{
  name: 'John',
  surname: 'Doe'
}, {
  name: 'David',
  surname: 'Mills'
}];

var elmContainer = document.createElement('li');
elmContainer.className = 'container';

function createAndAppendContainerChild(itemKey, itemValue, parentNode) {
  var elmChild = document.createElement('span');
  elmChild.className = itemKey;
  elmChild.appendChild(document.createTextNode(itemValue));
  parentNode.appendChild(elmChild);
}
function createAndAppendContainer(config, item) {
  var elmContainer = config.blueprintNode.cloneNode();
  Object.keys(item).forEach(function (key) {
    createAndAppendContainerChild(key, item[key], elmContainer);
  });
  config.parentNode.appendChild(elmContainer);
  return config;
}

objectList.reduce(createAndAppendContainer, {
  parentNode   : document.querySelector('#container-parent'),
  blueprintNode: elmContainer
});

.surname:before {
  content: ' '
}

<ul id="container-parent"></ul>

JavaScript: Append object properties as child elements

3 Answers3