Javascript Promise > TypeError：处理 API Feed 中丢失的图像

Question

作为一个新手，老实说，我不知道我复习过的问题（很多）是否已经包含了我需要的答案。我已经完全破解了各种文章/资源中的代码，所以它可能并不漂亮。

我正在提取 REST API 提要，并根据我需要的数据进行过滤。如果 JSON 提要中没有图像，代码就会停止，这就是我卡住的地方。当 API 提要中不存在图像时，我想加载默认图像 (default-image.jpg)。

var boatHeaders = new Headers();
boatHeaders.append("Accept", "application/vnd.dmm-v1+json");

var requestOptions = {
  method: 'GET',
  headers: boatHeaders,
  redirect: 'follow'
};

fetch("https://api.boats.com/inventory/search?fields=MakeString,Model,ModelYear,NominalLength,NormPrice,BoatLocation,Images&key=x?x?x?x?x?x?x?", requestOptions)
  .then(function (response) {
  return response.json();
})
  .then(function (boatData) {
    loadTableData(boatData);
})
  .catch(function (err) {
    console.log(`Error: ` + err);
})

function loadTableData(boatData) {
  const boats = Object.values(boatData.results);
  for (let boat of boats) {
    console.log(boat.Images[0].Uri, boat.NominalLength, boat.MakeString + ', ' + boat.Model, boat.ModelYear, boat.NormPrice, boat.BoatLocation.BoatCityName + ', ' + boat.BoatLocation.BoatStateCode);
  }
}

注意：出于安全原因，我省略了 API 密钥，并且包括了 JSON 中的前 x3 个条目（第二个对象没有图像）；

{
  "BoatLocation": {
    "BoatCityName": "Niantic",
    "BoatCountryID": "US",
    "BoatStateCode": "CT"
  },
  "MakeString": "Pro Line",
  "ModelYear": 2006,
  "Model": "Express",
  "NominalLength": "35 ft",
  "NormPrice": 139900,
  "Images": [
    {
      "Priority": "0",
      "Caption": "Photo 1",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_1.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:39-08:00"
    },
    {
      "Priority": "1",
      "Caption": "Motors",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_2.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:39-08:00"
    },
    {
      "Priority": "2",
      "Caption": "Helm",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_3.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:40-08:00"
    },
    {
      "Priority": "3",
      "Caption": "Seating",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_4.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:40-08:00"
    },
    {
      "Priority": "4",
      "Caption": "Forward Berth",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_5.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:40-08:00"
    },
    {
      "Priority": "5",
      "Caption": "Dinette",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_6.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:40-08:00"
    },
    {
      "Priority": "6",
      "Caption": "Aft Berth",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_7.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:40-08:00"
    },
    {
      "Priority": "7",
      "Caption": "Head",
      "Uri": "https://imt.boatwizard.com/images/1/61/66/3366166_0_140320111653_8.jpg",
      "LastModifiedDateTime": "2011-03-14T16:53:40-08:00"
    }
  ]
}
{
  "BoatLocation": {
    "BoatCityName": "Greenwich",
    "BoatCountryID": "US",
    "BoatStateCode": "CT"
  },
  "MakeString": "Sea Ray",
  "ModelYear": 2002,
  "Model": "36 DA",
  "NominalLength": "36 ft",
  "NormPrice": 159995
}
{
  "BoatLocation": {
    "BoatCityName": "Greenwich",
    "BoatCountryID": "US",
    "BoatStateCode": "CT"
  },
  "MakeString": "Grady-White",
  "ModelYear": 2005,
  "Model": "",
  "NominalLength": "20 ft",
  "NormPrice": 29995,
  "Images": [
    {
      "Priority": "0",
      "Caption": "Photo 1",
      "Uri": "https://imt.boatwizard.com/images/1/61/68/3366168_0_140320111820_1.jpg",
      "LastModifiedDateTime": "2011-03-14T18:20:17-08:00"
    },
    {
      "Priority": "1",
      "Caption": "Photo 2",
      "Uri": "https://imt.boatwizard.com/images/1/61/68/3366168_0_140320111820_2.jpg",
      "LastModifiedDateTime": "2011-03-14T18:20:18-08:00"
    },
    {
      "Priority": "2",
      "Caption": "Photo 3",
      "Uri": "https://imt.boatwizard.com/images/1/61/68/3366168_0_140320111820_3.jpg",
      "LastModifiedDateTime": "2011-03-14T18:20:18-08:00"
    }
  ]
}

这是使用我批准的解决方案的有效 loadTableData 函数。

function loadTableData(boatData) {
  const boats = Object.values(boatData.results);
  //console.log(boats)
  for (let boat of boats) {
    const defaultUri = "default-image.jpg";
    let img = defaultUri;
    if (boat.Images && boat.Images[0] && boat.Images[0]) {
      img = boat.Images[0].Uri;
    }
  console.log(img, boat.NominalLength, boat.MakeString + ', ' + boat.Model, boat.ModelYear, boat.NormPrice, boat.BoatLocation.BoatCityName + ', ' + boat.BoatLocation.BoatStateCode);
  }
}

Answer 1

如果Images 字段可以是undefined，您应该查看是否定义了Images 属性。

for (let boat of boats) {
  const defaultUri = "default-image.jpg"
  const img = boat.Images && boat.Images[0] && boat.Images[0].Uri || defaultUri
  // do something with img
}

您可以使用 if 语句代替 '&&' 运算符。

for (let boat of boats) {
  const defaultUri = "default-image.jpg"
  let img = defaultUri
  if (boat.Images && boat.Images[0] && boat.Images[0].Uri) {
    img = boat.Images[0].Uri
  }
  // do something with img
}

Answer 2

你可以这样做

console.log( boat.Images[0] ? boat.Images[0].Uri : "default-image.jpg")

称为三元运算符。它是 :

的简写形式

if(boat.Images[0]){
   console.log(boat.Images[0].Uri);
} else {
   console.log("default-image.jpg")
}

Answer 3

添加 if condition 如果从 api 获取图像设置此图像，否则添加您的图像

    if(boat.Images[0].Uri==null||boat.Images[0].Uri==undefind){
         console.log("default image ")
    }
else{
    console.log(boat.Images[0].Uri)
    }