Перебрать несколько объектов JS

Question

Я хочу получить данные из объекта, и мне нужно сделать несколько итераций. У меня есть другой объект внутри первого.

Вот что я пытаюсь сделать

for (var site in dataArray) {
    var itemList = site + ' - ' + dataArray[site].username + ' - ' + dataArray[site].followers + '<div class="detail"></div>' + '<br>';

    $('.test').append(itemList);

    for (var key in dataArray[site].details) {
        var itemDetail = ' - ' + key + ' ' + dataArray[site].details[key];

        $('.detail').append(itemDetail);
    }
}

Но когда я сделал этот код, первый элемент append получил все ключи / значения от других объектов деталей. Я только хочу отобразить детали объекта, связанные с его объектом родительского сайта.

Вот скрипка: http://jsfiddle.net/JeremDsgn/7EX6M/

Спасибо!

Answer 1

Это потому, что ваш селектор $('.detail') выбирает все элементы с классом detail,

Попробуйте использовать DOM вместо строк. Я даю вам это как личный совет. Я использовал для добавления HTML через строки, как вы делаете это сейчас. С тех пор, как я начал использовать объекты DOM, так как они на самом деле предназначены для использования, язык javascript стал в разы приятнее работать.

for (var site in dataArray) {
    var itemList = site + ' - ' + dataArray[site].username + ' - ' + dataArray[site].followers;

    var details = document.createElement('div');
    details.className = 'detail';

    for (var key in dataArray[site].details) {
        var itemDetail = ' - ' + key + ' ' + dataArray[site].details[key];

        $(details).append(itemDetail);
    }

    $('.test').append(itemList).append(details);
}