javascript - TypeError while looping on the response

Question

I am getting Error :

TypeError: Cannot read property 'url' of undefined

while I am looping on the response like this :

  getPhoto = (venueId) => {
    const PhotoEndpoint = `https://api.foursquare.com/v2/venues/${venueId}/photos?`;
    const parameters = {
      client_id: "my client_id",
      client_secret: " my client_secret",
      group: "venue",
      limit: "100",
      v: "20211301",
    };
 axios
      .get(PhotoEndpoint + new URLSearchParams(parameters))
      .then((response) => {
        for (var i = 0; i < response.data.response.photos.items.length; i++) {
          this.setState({
            photosUrl:
              response.data.response.photos.items[i].prefix +
              "original" +
              response.data.response.photos.items[i].suffix,
          });
        }
      })
      .catch((error) => {
        console.log(" My photo Error : " + error);
      });
  };

and the data I am receiving is like this: https://foursquare.com/developers/explore#req=venues%2F43695300f964a5208c291fe3%2Fphotos%3F

or I just paste it here as well in case the link didn't work:

{
  data: {
    meta: {
      code: 200,
      requestId: "6002bcf5c8ba5b3c6d668965",
    },
    notifications: [{
      type: "notificationTray",
      item: {
        unreadCount: 5,
      },
    }, ],
    response: {
      photos: {
        count: 30,
        items: [{
          id: "51b8f916498e6a8c16a329eb",
          createdAt: 1371076886,
          source: {
            name: "Instagram",
            url: "http://instagram.com",
          },
          prefix: "https://fastly.4sqi.net/img/general/",
          suffix: "/26739064_mUxQ4CGrobFqwpcAIoX6YoAdH0xCDT4YAxaU6y65PPI.jpg",
          width: 612,
          height: 612,
          user: {
            id: 26739064,
            firstName: "Darius",
            lastName: "Alonzo",
            gender: "male",
            countryCode: "US",
            photo: {
              prefix: "https://fastly.4sqi.net/img/user/",
              suffix: "/BWWLKDFKJ4VOVFXK.jpg",
            },
          },
          checkin: {
            id: "51b8f915498e481c2e86de41",
            createdAt: 1371076885,
            type: "checkin",
            timeZoneOffset: -240,
          },
          visibility: "public",
        }, ],
      },
    },
  }
};

There would be more than 100s of items. I am trying to get the prefix to concatenate it with the size which is original and again concatenate suffix to make a URL, and setState my PhotoUrl and later render each photo but I am getting TypeError What I am doing wrong?

Answer 1

Your schema does not contain a source element. maybe you need to combine the prefix and suffix of the photo element.