After conducting a search on this issue, I came across numerous queries from individuals experiencing difficulties with their for loops and only getting the last element as output. However, despite my best efforts, I can't seem to figure out what mistake I'm making.
Since I'm relatively new to Javascript, I suspect that the problem lies with closures. My objective is to extract some data from the JSON provided by the Urbandictionary API. Although the JSON retrieval is successful, my for loop for constructing divs with that data seems to be malfunctioning.
function word(term, def, example)
{
this.term = term;
this.def = def;
this.example = example;
}
var lexicon = ['highway+salute', 'score', 'ya+heard+me', 'utz'];
var color = ['reddy', 'bluey', 'greeny', 'tanny', 'darky'];
for (var i = 0; i < lexicon.length; 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>'
);
}
)};
To view a sample implementation of this code, check out the following fiddle: http://jsfiddle.net/orenthal/5X96B/
In testing, if I use lillyLivered[0], the code somewhat functions. However, it fails to execute altogether when I attempt using lillyLivered[i], generating the error:
Uncaught TypeError: Cannot read property 'term' of undefined (anonymous function)
This issue has left me perplexed. The console output of lillyLivered only displays the item at index position 2 in the lillyLivered array – in this case, "ya heard me":
lillyLivered
[ word
def: "Do you understand me? [ya heard] popular in New Orleans..."
example: "Say brah, I'm chillin here in Orlando, ya heard me..."
term: "ya heard me"
Eager to resolve this, I speculated whether the issue arose due to invoking calls like lillyLivered[i].term within the same for loop as the JSON data requests. As an experiment, I divided the process into two loops.
I introduced a separate loop to handle the creation of divs and display the items from the lillyLivered array. Unfortunately, I encountered the same error:
Uncaught TypeError: Cannot read property 'term' of undefined
Despite the setback, splitting the task did yield one benefit – the console output of lillyLivered now lists all four words from lexicon along with their definitions and examples:
lillyLivered
[word, word, word, word]
You can access another fiddle illustrating this approach here: http://jsfiddle.net/orenthal/5bTrJ/
At this point, I have a feeling that I might be overlooking something obvious. Your insights would be greatly appreciated!