Javascript 未捕获类型错误：无法读取属性'；url'；未定义的谷歌图像API

我试图生成5个随机图像（第一行是从闪烁和工作正常）。第二行是谷歌的，但出于某种原因，它只返回了4，并且在控制台上返回了一个错误，上面写着：

未捕获的TypeError:无法读取未定义的属性“url”

这是我的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>

玩家1

玩家2

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'
}, 

函数buildFlickrUrl（p）{
变量url=”https://farm";
url+=p.farm；
url+=”.staticflickr.com/”；
url+=p.server；
url+=“/”；
url+=p.id；
url+=“389;”；
url+=p.secret；
url+=“.jpg”；
返回url；
}
$（文档）.ready（函数（）{
变量flickrl=”https://www.flickr.com/services/rest/?    
method=flickr.photos.search&format=json&api\u key=
4ef070a1a5e8d5fd19faf868213c8bd0&NOJSONCALLBOOK=1&text=dog
$.get（flickrUrl，函数（响应）{
对于（变量i=0；i<5；i++）{
var photoUrl=buildflickrul（response.photos.photo[i]）；
$（“.player1Info label img”）.eq（i）.attr（'src'，photoUrl）；
$（“.player1 img”）.eq（i）.attr（'src'，photoUrl）；
console.log（photoUrl）；
}
});
var input=“可爱的小猫”；
$.getJSON（“https://ajax.googleapis.com/ajax/services/search/images?callback=?", {
问：输入，
v:‘1.0’
}, 

---

感谢您的帮助！

在控制台中设置断点并查看返回的结果

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

您将看到结果的长度为4，您正在循环读取索引4

改变

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

for（变量i=0；i<5；i++）{

到

for（var i=0；i

您的响应数据正常，问题出在

for

循环中

对象

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);
  }

for（var i=0；i

显然

data.responseData.results[i]

没有

url

属性，所以你必须控制台.log

data

看看你真正得到了什么。在网络选项卡中查找google请求，检索到的数据只带来4幅图像，没有第5幅图像错误意味着

data.responseData.results[i]

undefined@PatrickEvans（var i=0；i<5；i++）的

是否不返回5个图像？您的for循环设置为从0到4（iI'd reccommand
data.responseData.results.forEach（…
这是我得到的结果。因此
for（var i=0；i<5；i++）
不调用5项？我知道这是您遇到的错误…单击错误，它会将您带到我更改的行。@KenRyan它确实调用了5次，循环的第5次迭代是导致错误的原因error@epascarello成功了！但是，出于某种原因，它仍然只需要4张图片，我去看看它是如何设置的，并且只需要似乎需要4张？谢谢！这样就消除了错误。虽然它仍然只画了4张图片。我检查了一下，上面似乎只有4张图片…我怎么能得到第五张呢？
 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);
  }