title: Uncaught TypeError: Cannot read property 'url' of undefined - Google Image API
body: <p>I am trying to generate 5 random images (first row is from flicker and worked ok). On the second row it's from google, but it's only returning 4 for some reason and returning an error on the console that says:</p>
  
  <p>Uncaught TypeError: Cannot read property 'url' of undefined </p>
  
  <p>This is my HTML</p>
  
  <pre><code> &lt;div class="welcomeScreen"&gt;
    &lt;form id="players"&gt;
      &lt;p&gt;Player 1&lt;/p&gt;
      &lt;input id="player1Name" placeholder="Enter player 1's name"&gt;
  
      &lt;div class='player1Info clearfix'&gt;
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player1Avatar' class='player-1-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player1Avatar' class='player-1-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player1Avatar' class='player-1-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player1Avatar' class='player-1-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player1Avatar' class='player-1-avatar' value=''&gt;
        &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;p&gt;Player 2&lt;/p&gt;
      &lt;input id="player2Name" placeholder="Enter player 2's name"&gt;
  
      &lt;div class='player2Info clearfix'&gt;
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player2Avatar' class='player-2-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player2Avatar' class='player-2-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player2Avatar' class='player-2-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player2Avatar' class='player-2-avatar' value=''&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          &lt;img src=""&gt;
          &lt;input type='radio' name='player2Avatar' class='player-2-avatar' value=''&gt;
        &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;input value="Start the race!" type="submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function buildFlickrUrl(p) {
      var url = "https://farm";
      url += p.farm;
      url += ".staticflickr.com/";
      url += p.server;
      url += "/";
      url += p.id;
      url += "_";
      url += p.secret;
      url += ".jpg";
  
      return url;
  }
  
  $(document).ready(function() {
  
      var flickrUrl = "https://www.flickr.com/services/rest/?    
      method=flickr.photos.search&amp;format=json&amp;api_key=
      4ef070a1a5e8d5fd19faf868213c8bd0&amp;nojsoncallback=1&amp;text=dog
  
      $.get(flickrUrl, function(response) { 
          for(var i = 0; i &lt; 5; i++) {
              var photoUrl = buildFlickrUrl(response.photos.photo[i]);
              $(".player1Info label img").eq(i).attr('src', photoUrl);
              $(".player1 img").eq(i).attr('src' , photoUrl);
              console.log(photoUrl);
          }
      });
  
  var input="cute kitten";
  
  $.getJSON("https://ajax.googleapis.com/ajax/services/search/images?callback=?", {
      q: input,
      v: '1.0'
  }, 
  </code></pre>
  
  <p>Thanks for all your help!</p>