Javascript Promise > TypeError: Handling missing images in API Feed

As a newbie, I honestly don’t know if the questions I have reviewed (many) already contain the answer I need. I’ve totally hacked the code from various articles/resources, so it may not be pretty.

I’m pulling in a REST API feed, and filtering based on the data I need. If there is no image in the JSON feed, the code stops, and this is where I’m stuck. I would like to load a default image (default-image.jpg) when an image is not present in the API feed.

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

Note: I have omitted the API Key for security reasons, and am including the first x3 entries from the JSON (2nd Object has no Image);

{
  "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"
    }
  ]
}

Here is the working loadTableData function using the solution I approved.

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

11 thoughts on “Javascript Promise > TypeError: Handling missing images in API Feed”

  1. 568698 455298I was curious if you ever considered changing the page layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better? 339607

    Reply