Как отрисовать данные из одного массива по 6 строк в 3ех столбцах?

Question

[Fierfoxik]

Есть массив объектов с данными для отрисовки чекбоксов

Нужно создать блоки и отрисовать данные в созданных трех блоках по 6 штук.

т.е по логике нужно разбить этот массив на 3 части

Как реализовать этот алгоритм?

var widgetSettings = [
            { id: 'inlineCheckbox1',
                value:'option1',
                text: 'Статистика за период',
                StatusChecked: true
            },{
                id: 'inlineCheckbox2',
                value:'option2',
                text: 'Агентское вознаграждение',
                StatusChecked: false
            },{
                id: 'inlineCheckbox3',
                value:'option3',
                text: 'Экономия',
                StatusChecked: true
            },{
                id: 'inlineCheckbox4',
                value:'option4',
                text: 'Заканчивается аннуляция без штрафа',
                StatusChecked: false
            },{
                id: 'inlineCheckbox5',
                value:'option5',
                text: 'Скоро заезд',
                StatusChecked: false
            },{
                id: 'inlineCheckbox6',
                value:'option6',
                text: 'Комментарии',
                StatusChecked: false
            },{
                id: 'inlineCheckbox7',
                value:'option7',
                text: 'Чат агентов',
                StatusChecked: false
            },{
                id: 'inlineCheckbox8',
                value:'option8',
                text: 'Поиск',
                StatusChecked: false
            },{
                id: 'inlineCheckbox9',
                value:'option9',
                text: 'Время и дата',
                StatusChecked: false
            },{
                id: 'inlineCheckbox10',
                value:'option10',
                text: 'Погода',
                StatusChecked: false
            },{
                id: 'inlineCheckbox11',
                value:'option11',
                text: 'Календарь заявок',
                StatusChecked: false
            },{
                id: 'inlineCheckbox12',
                value:'option12',
                text: 'Ваши бонусы',
                StatusChecked: false
            },{
                id: 'inlineCheckbox13',
                value:'option13',
                text: 'Карта заказов',
                StatusChecked: false
            },{
                id: 'inlineCheckbox14',
                value:'option14',
                text: 'Игра,
                StatusChecked: false
            },{
                id: 'inlineCheckbox15',
                value:'option15',
                text: 'Наши публикации Instagram',
                StatusChecked: false
            },{
                id: 'inlineCheckbox16',
                value:'option16',
                text: 'Наши публикации Facebook',
                StatusChecked: false
            }
        ]

Answer 1

[Сергей Соколов]

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

var i
  , w
  , div
  , box
  , label
  , parent = document.body // к чему приклеивать блоки
  , perBlock = 5 // сколько в одном блоке
;
  
for( i = 0; i < widgetSettings.length; i++) {
  w = widgetSettings[i];

  box = document.createElement('input');
  box.type = 'checkbox';
  box.id = box.name = w.id;
  box.value = w.value;
  
  label = document.createElement('label');
  label.appendChild(box);
  label.appendChild( document.createTextNode(w.text));
  
  if( i % perBlock === 0) {
    if(div) parent.appendChild(div);
    div = document.createElement('div');
  }
  div.appendChild(label);
}
if( (i-1) % perBlock) parent.appendChild(div);

Fiddle

Answer 2

[Павел Корнилов]

<div id="block1" style="border:2px solid red"></div>
<div id="block2" style="border:2px solid red"></div>
<div id="block3" style="border:2px solid red"></div>
<script>
	var widgetSettings = [
            { id: 'inlineCheckbox1',
                value:'option1',
                text: 'Статистика за период',
                StatusChecked: true
            },{
                id: 'inlineCheckbox2',
                value:'option2',
                text: 'Агентское вознаграждение',
                StatusChecked: false
            },{
                id: 'inlineCheckbox3',
                value:'option3',
                text: 'Экономия',
                StatusChecked: true
            },{
                id: 'inlineCheckbox4',
                value:'option4',
                text: 'Заканчивается аннуляция без штрафа',
                StatusChecked: false
            },{
                id: 'inlineCheckbox5',
                value:'option5',
                text: 'Скоро заезд',
                StatusChecked: false
            },{
                id: 'inlineCheckbox6',
                value:'option6',
                text: 'Комментарии',
                StatusChecked: false
            },{
                id: 'inlineCheckbox7',
                value:'option7',
                text: 'Чат агентов',
                StatusChecked: false
            },{
                id: 'inlineCheckbox8',
                value:'option8',
                text: 'Поиск',
                StatusChecked: false
            },{
                id: 'inlineCheckbox9',
                value:'option9',
                text: 'Время и дата',
                StatusChecked: false
            },{
                id: 'inlineCheckbox10',
                value:'option10',
                text: 'Погода',
                StatusChecked: false
            },{
                id: 'inlineCheckbox11',
                value:'option11',
                text: 'Календарь заявок',
                StatusChecked: false
            },{
                id: 'inlineCheckbox12',
                value:'option12',
                text: 'Ваши бонусы',
                StatusChecked: false
            },{
                id: 'inlineCheckbox13',
                value:'option13',
                text: 'Карта заказов',
                StatusChecked: false
            },{
                id: 'inlineCheckbox14',
                value:'option14',
                text: 'Игра',
                StatusChecked: false
            },{
                id: 'inlineCheckbox15',
                value:'option15',
                text: 'Наши публикации Instagram',
                StatusChecked: false
            },{
                id: 'inlineCheckbox16',
                value:'option16',
                text: 'Наши публикации Facebook',
                StatusChecked: false
            }
        ]
widgetSettings.forEach(function(i,ind) {
	switch (ind) {
		case 0:
		case 1:
			document.getElementById('block1').textContent += i.text + " | ";
			break;
		case 2:
		case 3:
			document.getElementById('block2').textContent += i.text + " | ";
			break;
		case 4:
		case 5:
			document.getElementById('block3').textContent += i.text + " | ";
			break;
	}
	
})
</script>