Wrap every new type child into one row

Question

Every same child type should wrap in div. The problem is I am getting single array which contains all the children. So I am running loop over it and tried to create new div and close it when children type changed but it is not well written.

fiddle

var items = [{
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child2",
  "name": "2 "
}, {
  "type": "child2",
  "name": "2"
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3"
}]
var child = "";
var html = ''

items.forEach(function(item) {
  if (child !== item.type) {
    html += '<div>'
  }
  html += '<div>' + item.name + ' </div>';
  if (child !== item.type && child) {
    html += '</div>'
  }
  child = item.type;

})

document.getElementById('html').innerHTML = html;

div { border:1px solid black }

<div id="html"></div>

I added a css to the snippet we made for you to show the issue better — mplungjan, Jul 03 '17 at 06:41
From your post, it is hard to visualize what is expected. Is this what you are trying to achieve? [Fiddle](https://jsfiddle.net/40a9zzwL/1/) — Thangadurai, Jul 03 '17 at 06:52

score 1 · Accepted Answer · answered Jul 03 '17 at 06:47

what you should do, is when you check whether child is not the same with item.type, you should add a closing </div> and a new open <div>

items.forEach(function(item) {
 if(child != item.type){
    html += '</div>';
    html += '<div>';
 }
 html += '<div>' + item.name + ' </div>';
 child = item.type;
})

demo : https://jsfiddle.net/0sz9xpxq/2/

score 1 · Answer 2 · answered Jul 03 '17 at 06:56

You can try this, https://jsfiddle.net/trupti11/0sz9xpxq/4/

var html = '<div>';  
items.forEach(function(item) {
      if (child != item.type && child) {
        html += '</div><div>'+ item.name;
      }
      else
      {
      html += item.name;
      }
      child = item.type;

    })
    html += '</div>';

Daniel Bernsons · Answer 3 · 2017-07-03T07:03:45.780

Instead of messy text manipulation, you can use document.createElement to do it a lot cleaner. There's a great answer to this SO question that talks about the benefits of using createElement vs adding a string to innerHTML

var child = "";
var html = document.getElementById('html');
var node;

items.forEach(function(item) {
  if (child !== item.type) {
    if (node) {
        html.appendChild(node);
    }
    node = document.createElement('div');
  }
    var newElem = document.createElement('div');
    newElem.innerHTML = item.name;
    node.appendChild(newElem);

  child = item.type;

});

html.appendChild(node);

Fiddle

Wrap every new type child into one row

3 Answers3