Sebagai seorang pemula, jujur ​​saya tidak tahu apakah pertanyaan yang saya ulas (banyak) sudah berisi jawaban yang saya butuhkan. Saya telah benar-benar meretas kode dari berbagai artikel/sumber daya, jadi mungkin tidak cantik.

Saya menarik umpan REST API, dan memfilter berdasarkan data yang saya butuhkan. Jika tidak ada gambar di umpan JSON, kode berhenti, dan di sinilah saya macet. Saya ingin memuat gambar default (default-image.jpg) ketika gambar tidak ada di umpan 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,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);
  }
}

Catatan: Saya telah menghilangkan Kunci API untuk alasan keamanan, dan saya menyertakan entri x3 pertama dari JSON (Objek ke-2 tidak memiliki Gambar);

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

Berikut adalah fungsi loadTableData yang berfungsi menggunakan solusi yang saya setujui.

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);
  }
}
1
mickski 7 Januari 2021, 17:44

3 jawaban

Jawaban Terbaik

Jika bidang Images dapat berupa undefined, Anda akan melihat apakah properti Images didefinisikan atau tidak.

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
}

Anda dapat menggunakan pernyataan if alih-alih operator '&&'.

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
}
0
c0m1t 8 Januari 2021, 19:00

Anda dapat melakukan sesuatu seperti

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

Yang disebut operator ternary. Ini adalah bentuk ringkas dari:

if(boat.Images[0]){
   console.log(boat.Images[0].Uri);
} else {
   console.log("default-image.jpg")
}
0
Jeremy Thille 7 Januari 2021, 14:48

Tambahkan if condition jika mendapatkan gambar dari api atur gambar ini jika tidak tambahkan gambar Anda

    if(boat.Images[0].Uri==null||boat.Images[0].Uri==undefind){
         console.log("default image ")
    }
else{
    console.log(boat.Images[0].Uri)
    }
0
mustafa abdelbadea 7 Januari 2021, 14:53