Yes your issue has to do with closures. Your get requests are likely finishing (and calling their respective callbacks) long after all of the requests have been sent. Because of this, by the time the callbacks are called, i
will be equal to lexicon.length
. You can fix this by enclosing the get request in its own functional scope and passing the index i
at that moment into that scope. Like this:
for (var i = 0; i < lexicon.length; i++) {
(function(i) {
$.getJSON('http://api.urbandictionary.com/v0/define?term=' + lexicon[i],
function(data){
lillyLivered = [];
lillyLivered.push(new word(data.list[0].word, data.list[0].definition, data.list[0].example));
console.log(lillyLivered);
$('.container-fluid').html('<div class="row message unread">' +
' <div class="col-xs-12 col-sm-6 col-lg-3 malok ' + color[i] + ' id="">' +
'<div class="row dict">' +
'<div class="col-xs-9 col-sm-9 col-lg-9">' +
'<h3 class="term term0">' +
lillyLivered[i].term +
'</div><div class="col-xs-3 col-sm-3 col-lg-3">' +
'<div class="col-xs-3 col-sm-3 col-lg-3">' +
' <span class="step size-32"><i class="icon ion-ios7-world"></i></span>' +
'</div></div>' +
'<div class="row dict"><div class="col-xs-12 col-sm-12 col-lg-12">' +
'<p class="definition definition0">' +
lillyLivered[i].def +
'</p><p class="eg eg0">' +
lillyLivered[i].example +
'</p></div></div></div>'
);
}
)};
}(i));
}
The other answer also mentions a good point about lillyLivered
.
Edit:
Due to high demand :D, you could also use the forEach
method to clean up your code and fix your issue:
lexicon.forEach(function(lexItem, i){
$.getJSON('http://api.urbandictionary.com/v0/define?term=' + lexItem, // lexItem === lexicon[i]
function(data){
lillyLivered = [];
lillyLivered.push(new word(data.list[0].word, data.list[0].definition, data.list[0].example));
console.log(lillyLivered);
$('.container-fluid').html('<div class="row message unread">' +
' <div class="col-xs-12 col-sm-6 col-lg-3 malok ' + color[i] + ' id="">' +
'<div class="row dict">' +
'<div class="col-xs-9 col-sm-9 col-lg-9">' +
'<h3 class="term term0">' +
lillyLivered[i].term +
'</div><div class="col-xs-3 col-sm-3 col-lg-3">' +
'<div class="col-xs-3 col-sm-3 col-lg-3">' +
' <span class="step size-32"><i class="icon ion-ios7-world"></i></span>' +
'</div></div>' +
'<div class="row dict"><div class="col-xs-12 col-sm-12 col-lg-12">' +
'<p class="definition definition0">' +
lillyLivered[i].def +
'</p><p class="eg eg0">' +
lillyLivered[i].example +
'</p></div></div></div>'
);
}
)};
});