Обещание Javascript> Ошибка типа: обработка отсутствующих изображений в ленте API

ProgramBox

Обещание Javascript> Ошибка типа: обработка отсутствующих изображений в ленте API

Post author:admin
Запись опубликована:27 ноября, 2022
Post category:Вопросы по программированию

#javascript #json #rest

#javascript #json #остальное

Вопрос:

Как новичок, я, честно говоря, не знаю, содержат ли вопросы, которые я рассмотрел (многие), уже ответ, который мне нужен. Я полностью взломал код из различных статей / ресурсов, так что это может быть некрасиво.

Я подключаю канал REST API и фильтрую на основе нужных мне данных. Если в ленте JSON нет изображения, код останавливается, и вот тут я застрял. Я хотел бы загрузить изображение по умолчанию (default-image.jpg ), когда изображение отсутствует в ленте API.

 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,Imagesamp;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 по соображениям безопасности и включаю первые записи x3 из JSON (у 2-го объекта нет изображения);

 {
  "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 amp;amp; boat.Images[0] amp;amp; 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);
  }
}

Ответ №1:

Если Images поле может быть undefined , вы должны увидеть, определено ли Images свойство или нет.

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

Вы можете использовать операторы if вместо операторов ‘amp;amp;’.

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

Ответ №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")
}

1. Спасибо, что нашли время вернуться и предложить решение. Я выбрал @c0m1t, поскольку он был первым в списке.

2. Я пытался проголосовать, но мне не хватает похвалы >> «Спасибо за отзыв! Голоса, поданные лицами с репутацией менее 15, записываются, но не изменяют публично отображаемую оценку публикации «.

Ответ №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)
    }

1. Спасибо, что нашли время вернуться и предложить решение. Я выбрал @c0m1t, поскольку он был первым в списке.

2. Этот код сломается, если boat.Images[0] не определено. Сначала вы не проверяете его существование.

Метки: Обещание Javascript> Ошибка типа: обработка отсутствующих изображений в ленте API