Uncaught TypeError: Cannot read property 'url' of undefined - Google Image API

Question

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:

Uncaught TypeError: Cannot read property 'url' of undefined

This is my HTML

 <div class="welcomeScreen">
  <form id="players">
    <p>Player 1</p>
    <input id="player1Name" placeholder="Enter player 1's name">

    <div class='player1Info clearfix'>
      <label>
        <img src="">
        <input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
      </label>
    </div>

    <p>Player 2</p>
    <input id="player2Name" placeholder="Enter player 2's name">

    <div class='player2Info clearfix'>
      <label>
        <img src="">
        <input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
      </label>

      <label>
        <img src="">
        <input type='radio' name='player2Avatar' class='player-2-avatar' value=''>
      </label>
    </div>

    <input value="Start the race!" type="submit">
    </form>
</div>

Javascript

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&format=json&api_key=
    4ef070a1a5e8d5fd19faf868213c8bd0&nojsoncallback=1&text=dog

    $.get(flickrUrl, function(response) { 
        for(var i = 0; i < 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'
},

Thanks for all your help!

clearly `data.responseData.results[i]` doesn't have a `url` property, so you have to console.log `data` and see what you've really got. — adeneo, Nov 14 '14 at 19:53
Looking in the network tab for the google request, the data retrieved only brings in 4 images, there is no 5th image — Patrick Evans, Nov 14 '14 at 19:55
@PatrickEvans does `for(var i = 0; i < 5; i++)` not return 5 images? — Ken Ryan, Nov 14 '14 at 20:01
Your for loop is setup to go from 0 to 4 (i<5), 0,1,2,3,4 <- how many is there: 5, so your loop executes that many times. — Patrick Evans, Nov 14 '14 at 20:04

score 3 · Accepted Answer · answered Nov 14 '14 at 19:55

3

Set a breakpoint in the console and look at the results being returned.

> data.responseData.results
[Object, Object, Object, Object]

You will see the results has a length of 4 and you are looping to read index of 4.

Change

for(var i = 0; i < 5; i++) {

to

for(var i = 0; i < data.responseData.results.length; i++) {

answered Nov 14 '14 at 19:55

epascarello

204,599
20
195
236

I'd reccommend `data.responseData.results.forEach(...` – adeneo Nov 14 '14 at 19:58
http://oi62.tinypic.com/25yvedx.jpg This is what I get. So `for(var i = 0; i < 5; i++)` doesn't call 5 items? – Ken Ryan Nov 14 '14 at 19:59
I know that is the error you got...Click on the error and it takes you right to the line I changed. – epascarello Nov 14 '14 at 20:01
@KenRyan It does call 5 times, the 5th iteration through the loop is what causes the error – Patrick Evans Nov 14 '14 at 20:01
@epascarello that worked! however, it still calls for only 4 images for some reason, I went to https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=cute%20kitten to see how it's set up and it only calls for 4 it seems? – Ken Ryan Nov 14 '14 at 20:10
See: http://stackoverflow.com/questions/4868815/google-ajax-api-how-do-i-get-more-than-4-results – epascarello Nov 14 '14 at 20:13

ianaya89 · Answer 2 · 2014-11-14T20:01:28.960

1

Your response data is ok, the problem is in your for loop.

The object data.responseData.results contains 4 elements and your looping since i < 5. Just change it to data.responseData.results.length.

 for(var i = 0; i < data.responseData.results.length ; i++) {
    var googleImageUrl = data.responseData.results[i].url;
    $(".player2Info label img").eq(i).attr('src', data.responseData.results[i].url);
    console.log(googleImageUrl);
  }

edited Nov 14 '14 at 20:01

answered Nov 14 '14 at 19:56

ianaya89

4,153
3
26
34

thank you! That got rid of the error. It still is only drawing 4 images though. I checked https://ajax.googleapis.com/ajax/services/search/images?v=1.0&q=cute%20kitten and it seems there are only 4 images at the top... how can I get a fifth? – Ken Ryan Nov 14 '14 at 20:11

Uncaught TypeError: Cannot read property 'url' of undefined - Google Image API

2 Answers2

Linked