Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
79
rated 0 times [  86] [ 7]  / answers: 1 / hits: 28744  / 10 Years ago, fri, november 14, 2014, 12:00:00

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!


More From » jquery

 Answers
14

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++) {

[#68801] Wednesday, November 12, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
whitney

Total Points: 642
Total Questions: 110
Total Answers: 98

Location: Solomon Islands
Member since Mon, Jun 20, 2022
2 Years ago
;