javascript 未捕获的类型错误：无法读取未定义的属性“url” - Google Image API
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26937781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'url' of undefined - Google Image API
提问by Ken Ryan
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:
我正在尝试生成 5 个随机图像（第一行来自闪烁并且工作正常）。在第二行它来自谷歌，但由于某种原因它只返回 4 并在控制台上返回一个错误，内容为：
Uncaught TypeError: Cannot read property 'url' of undefined
未捕获的类型错误：无法读取未定义的属性“url”
This is my HTML
这是我的 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
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!
感谢你的帮助！
采纳答案by epascarello
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.
您将看到结果的长度为 4，并且您正在循环读取索引为 4。
Change
改变
for(var i = 0; i < 5; i++) {
to
到
for(var i = 0; i < data.responseData.results.length; i++) {
回答by ianaya89
Your response data is ok, the problem is in your forloop.
您的响应数据没问题，问题出在您的for循环中。
The object data.responseData.resultscontains 4 elements and your looping since i < 5. Just change it to data.responseData.results.length.
该对象data.responseData.results包含 4 个元素和您的循环，因为i < 5。只需将其更改为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);
}
