未捕获的类型错误:无法读取未定义的属性“url" - Google Image API [英] Uncaught TypeError: Cannot read property 'url' of undefined - Google Image API

问题描述

我正在尝试生成 5 个随机图像(第一行来自闪烁并且工作正常).在第二行它来自谷歌，但由于某种原因它只返回 4 并在控制台上返回一个错误，内容为:

未捕获的类型错误:无法读取未定义的属性url"

这是我的 HTML

 
<form id="玩家"><p>玩家 1</p><input id="player1Name" placeholder="输入玩家1的名字"><div class='player1Info clearfix'><标签><img src=""><input type='radio' name='player1Avatar' class='player-1-avatar' value=''><标签><img src=""><input type='radio' name='player1Avatar' class='player-1-avatar' value=''><标签><img src=""><input type='radio' name='player1Avatar' class='player-1-avatar' value=''><标签><img src=""><input type='radio' name='player1Avatar' class='player-1-avatar' value=''><标签><img src=""><input type='radio' name='player1Avatar' class='player-1-avatar' value=''>
<p>玩家2</p><input id="player2Name" placeholder="输入玩家2的名字"><div class='player2Info clearfix'><标签><img src=""><input type='radio' name='player2Avatar' class='player-2-avatar' value=''><标签><img src=""><input type='radio' name='player2Avatar' class='player-2-avatar' value=''><标签><img src=""><input type='radio' name='player2Avatar' class='player-2-avatar' value=''><标签><img src=""><input type='radio' name='player2Avatar' class='player-2-avatar' value=''><标签><img src=""><input type='radio' name='player2Avatar' class='player-2-avatar' value=''>

<input value="开始比赛！"类型=提交"></表单>

Javascript

function buildFlickrUrl(p) {var url = "https://farm";网址 += p.farm;url += ".staticflickr.com/";url += p.server;网址+=/"；网址 += p.id;网址 += "_";url += p.secret;url += ".jpg";返回网址；}$(document).ready(function() {var flickrUrl = "https://www.flickr.com/services/rest/?方法=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);控制台日志(photoUrl)；}});var input="可爱的小猫";$.getJSON("https://ajax.googleapis.com/ajax/services/search/images?callback=?", {q:输入，v:'1.0'},

感谢您的帮助！

解决方案

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

<代码>>数据响应数据结果【物体，物体，物体，物体】

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

改变

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

到

for(var i = 0; i 

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!

解决方案

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

这篇关于未捕获的类型错误:无法读取未定义的属性“url" - Google Image API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！