[Mikael86]

Доброго времени суток, я являюсь полным нубом в JS, но возникла необходимость разбираться в боевых условиях. На 3-й день понял что не справлюсь сам и решил отписаться тут, может что-то подскажете.

Есть массив имеющий вид:
список товаров -> общее описание, и в общем описании строка с вторичным массовом технических характеристик, количество которых может отличаться

var cmodels = {
                            "id1" : {
                            "Название" : "",
                            "Описание" : "",
                            "Изображение" : "",
                            "Цена" : "",

                            "Param" : {
                                                 "ТХ1" : "",
                                                 "ТХ2" : "",
                                                 "ТХ3" : "",
                                                 "ТХ4" : "",
                                                 "ТХ5" : ""
                                          }
},

Изначально я хотел делать массив в виде список->товар->значение с обработчиком.
Но такой вариант не прокатил потому что там где переменная ттх отсутствовала мне выдавало текст с надпистью undefined, что логично.
теперь я хочу чтоб ТТХ были отдельным массивом считываемым полностью внутри массива основного.

//Массив начало//
var cmodels = {
    "idcmodels1" : {
    "Название" : "",
    "Описание" : "<p></p>",
    "Изображение" : "",
    "Цена" : "",
    "ТТХ1" : "<li></li>",
    "ТТХ2" : "<li></li>",
    "ТТХ3" : "<li></li>",
    "ТТХ4" : "<li></li>",
    "ТТХ5" : "<li></li>"   
  }
};
//Массив конец//

//Вывод в консоль//
console.log(cmodels);

//Вывод на страницу//
  var out = '';
  for (var key in cmodels)
  {
    out+= '<h5>'+cmodels[key].Название+'</h5>';
    out+= '<p>'+cmodels[key].Описание+'</p>';
    out+= '<p>'+cmodels[key].Цена+'</p>';
    out+= '<ul>';
    out+= '<img" src="';
    out+= cmodels[key].Изображение;
    out+= '">';
    out+= cmodels[key].ТТХ1;
    out+= cmodels[key].ТТХ2;
    out+= cmodels[key].ТТХ3;
    out+= cmodels[key].ТТХ4;
    out+= cmodels[key].ТТХ5;
  }
document.getElementById('out').innerHTML = out;

.

Ещё нужно иметь возможность резать массив чтоб можно было вставить обработчик в 2 блока и вывести часть товара в одной половине экрана и часть в другой, чтото типа var cmodelsfirst = cmodels.slice(1, 3);

или если подскажите как можно-ли вызвать данные частично через for или while по ключу
(может есть какая то комбинация как в php).

for ($row = 0; $row < 4; $row++) {
foreach($cmodels[$row] as $key => $value)
{}
};


также нужно добавить в список кнопку с id товара по которой будет открываться блок фиксированный в центре экрана с формой обратной связи и описанием товара автоматом вставляемого в эту форму и отсылаемого на почту

чтото типо этого но тут тоже непонятка как вставить именно нужные данные в div по id и главное как грамотно это прописать

window.onload= function() {
	document.getElementById('toggler').onclick = function() {
			openbox('box', this);
			return false;
	};
};

function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
			div.style.display = 'none';
			toggler.innerHTML = '<i class="fa fa-bars fa-2x" 
                                                        aria-hidden="true"></i>';
	}
	else {
			div.style.display = 'block';
			toggler.innerHTML = '<i class="fa fa-times fa-2x" 
                                                          aria-hidden="true"></i>';

	}

}

Вообщем если не сложно или кто-то сталкивался с подобным киньте упрощённый пример или подскажите что можно почитать в этом направлении. Заранее благодарен.