Javascript承诺>；TypeError:处理API提要中缺少的图像

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

我正在引入一个RESTAPI提要，并根据我需要的数据进行过滤。如果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条目（第二个对象没有图像）

下面是使用我批准的解决方案的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);
  }
}

---

你可以这样做

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

---

你可以这样做

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

---

添加

如果条件

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

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

---

添加

如果条件

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

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

---

如果

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
}

---

如果

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
}

---

感谢您抽出时间回来并提供解决方案。我选择了@c0m1t，因为它是列表中的第一个。如果

boat.Images[0]

未定义，则此代码将中断。您没有首先检查它的存在。感谢您抽出时间回来并提供解决方案。我选择了@c0m1t，因为它是列表中的第一个。如果

boat.Images[0]

未定义，则此代码将中断。您没有首先检查它的存在。感谢您抽出时间回来并提供解决方案。我选择了@c0m1t，因为它是列表中的第一个。也许我至少应该得到一张赞成票我试图提高投票率，但我没有足够的荣誉>>“谢谢你的反馈！声誉低于15的人所投的票会被记录下来，但不会改变公开显示的帖子分数。”哦，那很好，没关系，谢谢你花时间回来并提供解决方案。我选择了@c0m1t，因为它是列表中的第一个。也许我至少应该得到一张赞成票我试图提高投票，但我没有足够的荣誉>>“谢谢你的反馈！记录了那些声誉低于15的人的投票，但不会更改公开显示的帖子分数。”哦，那好吧，没关系，那为什么

&&boat.Images[0]&&boat.Images[0]

？这是多余的为什么

和&boat.Images[0]和&boat.Images[0]

？这是多余的