title: Why am I only getting the last item from javascript for loop?
body: <p>I've tried searching for this issue and have found a number of questions from people having problems with their for loops and it only returning the last element. Try as I might, I'm just not understanding what I'm doing wrong here.</p>
  
  <p>I'm really new to Javascript so I think I'm having an issue with <strong>closures</strong>? What I'm writing is supposed to grab some data from the JSON returned from the Urbandictionary API. The JSON fetch works but my <strong>for</strong> loop to build divs with that data is not working properly.</p>
  
  <pre><code>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 &lt; 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('&lt;div class="row message unread"&gt;' + 
          ' &lt;div class="col-xs-12 col-sm-6 col-lg-3 malok ' + color[i] + ' id=""&gt;' +
          '&lt;div class="row dict"&gt;' + 
          '&lt;div class="col-xs-9 col-sm-9 col-lg-9"&gt;' + 
          '&lt;h3 class="term term0"&gt;' +
          lillyLivered[i].term + 
          '&lt;/div&gt;&lt;div class="col-xs-3 col-sm-3 col-lg-3"&gt;' +
          '&lt;div class="col-xs-3 col-sm-3 col-lg-3"&gt;' + 
          ' &lt;span class="step size-32"&gt;&lt;i class="icon ion-ios7-world"&gt;&lt;/i&gt;&lt;/span&gt;' +
          '&lt;/div&gt;&lt;/div&gt;' + 
          '&lt;div class="row dict"&gt;&lt;div class="col-xs-12 col-sm-12 col-lg-12"&gt;' +
          '&lt;p class="definition definition0"&gt;' + 
          lillyLivered[i].def +
          '&lt;/p&gt;&lt;p class="eg eg0"&gt;' + 
          lillyLivered[i].example + 
          '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
          );
      }
  )};
  </code></pre>
  
  <p>I have a fiddle up here: <a href="http://jsfiddle.net/orenthal/5X96B/" rel="nofollow">http://jsfiddle.net/orenthal/5X96B/</a></p>
  
  <p>This code works somewhat if I use <code>lillyLivered[0]</code>. It doesn't load at all if I use <code>lillyLivered[i]</code>. I get the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'term' of undefined (anonymous function)
  </code></pre>
  
  <p>I'm getting confused by it. Console output of <code>lillyLivered</code> only shows the item at the index position 2 in the <code>lillyLivered</code> array. In this case "ya heard me":</p>
  
  <pre><code>lillyLivered
  [ word
      def: "Do you understand me? [ya heard] popular in New Orleans. the phrase is suppose to come after a sentence."
      example: "Say brah, I'm chillin here in Orlando, ya heard me. ↵-C-murder's innocent, ya heard me."
      term: "ya heard me"
  </code></pre>
  
  <p>I thought that maybe the problem existed because of the calls to <code>lillyLivered[i].term</code> etc... were contained within the same <strong>for</strong> loop as the calls to the JSON data? So I tried doing this with two loops.</p>
  
  <p>I created a new for loop that would take care of creating the divs and outputting the items from the <code>lillyLivered</code> array but I ran into the same issue here. </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'term' of undefined 
  </code></pre>
  
  <p>But this has helped with one of the issues, that being that the console output of <code>lillyLivered</code> now lists all four words from lexicon along with their definitions and examples.</p>
  
  <pre><code>lillyLivered
  [word, word, word, word]
  </code></pre>
  
  <p>I have a fiddle of this one up here:
  <a href="http://jsfiddle.net/orenthal/5bTrJ/" rel="nofollow">http://jsfiddle.net/orenthal/5bTrJ/</a></p>
  
  <p>I get the feeling that I'm being dense and missing something very obvious here.</p>