Зачем повторяется повторная запись цикла? JavaScript

Question

У меня есть некоторые данные тестов:

var $data = { 
    "pitanje": [{ 
    "id": 1, 
    "naziv": 'Kako se zove najveci bruger', 
    "odgovori": [{ 
     "id": "1", 
     "ime": "burger1", 
     "tip": "netacno" 
    }, { 
     "id": "2", 
     "ime": "burger2", 
     "tip": "netacno" 
    }, { 
     "id": "3", 
     "ime": "burger3", 
     "tip": "tacno" 
    }, { 
     "id": "4", 
     "ime": "burger4", 
     "tip": "netacno" 
    }] 
    }, { 
    "id": 2, 
    "naziv": 'Kako se zove najveci bruger king', 
    "odgovori": [{ 
     "id": "1", 
     "ime": "burger12", 
     "tip": "netacno" 
    }, { 
     "id": "2", 
     "ime": "burger13", 
     "tip": "netacno" 
    }, { 
     "id": "3", 
     "ime": "burger14", 
     "tip": "tacno" 
    }], 
    }] 
}; 

FOR - LOOP:

for (var i = 0; i < $data.pitanje.length; i++) { 
    $("#kviz").append("<div class='pitanje col-md-12'><h1>" + $data.pitanje[i]['naziv'] + "</h1></div>"); 

    for (var x = 0; x < $data.pitanje[i]['odgovori'].length; x++) { 
    $(".pitanje").append("<li class='odgovor col-md-3'><div data-pitanjeid=" + 
     $data.pitanje[i]['id'] + 
     " data-odgovorid=" + 
     $data.pitanje[i]['odgovori'][x]['id'] + 
     ">" + 
     $data.pitanje[i]['odgovori'][x]['ime'] + 
     "</div></li>"); 
    // console.log($data.pitanje[i]['odgovori'][x]); 
    }; 
}; 

ВЫВОД:

--Kako se zove najveci bruger-- 
burger1 
burger2 
burger3 
burger4 
**burger12** 
**burger13** 
**burger14** 

(почему это три из второго цикла также в первой)

*Kako se zove najveci bruger king* 
burger12 
burger13 
burger14 

Answer 1

Проблема заключается в том, что каждый добавляет один элемент DIV с классом pitanje для каждой итерации вашего внешнего цикла:

$("#kviz").append("<div class='pitanje col-md-12'><h1>" + $data.pitanje[i]['naziv'] + "</h1></div>"); 

Во внутреннем цикле вы запрашиваете $(".pitanje"). На второй итерации первого цикла это обнаружит как созданный вами div, так и добавит данные к ним обоим.

Вы должны были бы написать что-то вроде этого:

for (var i = 0; i < $data.pitanje.length; i++) { 
    var elementToAppendTo = $("<div class='pitanje col-md-12'><h1></h1><ul></ul></div>"); 
    elementToAppendTo.find('h1').text($data.pitanje[i]['naziv']); 

    $("#kviz").append(elementToAppendTo); 

    for (var x = 0; x < $data.pitanje[i]['odgovori'].length; x++) { 
    var newItem = $("<li class='odgovor col-md-3'><div></div></li>") 
    newItem.find('div').data({ 
     pitanjeid: $data.pitanje[i]['id'], 
     odgovorid: $data.pitanje[i]['odgovori'][x]['id'] 
    }).text($data.pitanje[i]['odgovori'][x]['ime']) 
    elementToAppendTo.find('ul').append(newItem); 
    // console.log($data.pitanje[i]['odgovori'][x]); 
    } 
} 

дополнительное примечание: а li элемент не является допустимым дочерним из ul.