Json Array在第二个for循环中未定义

Question

I have a Json with urls to pictures and a corresponding number. I am running it through two for loops, which works fine in the first one, but not in the second. Can you tell me why it shows me 'undefined' in the second one?

   {
    "sources": [
        {"pic": "../img/Bild1.png", "number": "1"},
        {"pic": "../img/Bild2.png", "number": "2"},

        {"pic": "../img/Bild9.png", "number": "9"},
        {"pic": "../img/Bild10.png","number": "10"}
]
}

 var url = "../js/Bildquelle.json"; var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState === 4 && xhttp.status === 200) { var json = JSON.parse(xhttp.responseText); gameStart(json.sources); } }; xhttp.open("GET", url, true); //Resource beziehen, true= synchron xhttp.send(); //Anfrage abschicken function gameStart(Bildquelle) { // Create the pile of shuffled cards in random order Bildquelle.sort(function() { return Math.random() - .5 }); for (var i = 0; i < 10; i++) { var Karte = $('<img src=' + Bildquelle[i].pic + ' alt="Bild">').data('number', Bildquelle[i].number).attr('id', 'card' + Bildquelle[i].number).appendTo('#cardPile').draggable({ containment: '#content', stack: '#cardPile img', cursor: 'move', revert: true }) }; // Create the card slots var number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; for (var j = 1; j <= 10; j++) { var Kartenslot = $('<div></div>').data('number', j).appendTo('#cardSlots').css('background-image', 'url(' + Bildquelle[j].pic + ')').attr('id', 'slot' + number[j - 1]).droppable({ accept: '#cardPile img', hoverClass: 'hovered', drop: handleCardDrop }); } }; 

Answer 1

If es6 support available, use let i instead of var i or change var name in second for .

var create scope to function level.

Answer 2

You are defining the variable i in both loops. Try to change the variable of the second loop for another one or trying using block scoping

    for (let i = 0; i < 10; i++) {
        /* i is defined here */ 
    }
    /* i is not defined here * /

This will give you the option to declare the variable i in both loops without errors.