# 用 api 引入資料若遇到 `null` 可以用 or邏輯運算子 `||` 給替代值

###### tags: `JacaScript`, `API`

試著串接[芝加哥藝術博物館](https://api.artic.edu/docs/#quick-start)圖片搜尋API時，發現輸入某些關鍵字時，圖片載入會報錯。

這種情況發生，是因為某些藝術作品剛好那個屬性裡面的值是 `null`，本來就沒有東西，所以變數存不到值，導致渲染失敗。

> Can’t not read property of null

本篇文章紀錄過程中遇到的 2 種 null，和解決方式。

芝加哥藝術博物館圖片API回傳的物件資料結構：https://api.artic.edu/api/v1/artworks/27992

## 第一種 null：變數賦值失敗

let alt = item.thumbnail.alt_text


item 代表的是每一個 data。

我要找 data 裡面的 thumbnail 屬性裡面的 alt_text 屬性的值，作為圖卡渲染出來後的 `<img>` 的 alt 文字。

會報錯就是因為某筆物件的 thumbnail 的值是： null，導致自定義的變數 `alt` 沒有資料可以存進去。

> Can’t not read property of null

錯誤訊息中的 null 指的就是 thumbnail ，意思就是無法讀取到 null 裡面的 alt_text 屬性。

### 先解決 thumbnail = null 的問題

let thumb = item.thumbnail || NaN;

let alt = thumb.alt_text || "it's an artpiece but no picture to be shown";

拆結構，另外宣告一個變數 thumb 去存取 `item.thumbnail`，把 thumbnail 拉出來先進行判斷，若發現值是 null 時，就透過「or 邏輯運算子`||`」 改成賦值 NaN，

對變數 alt 也做另一個判斷，thumb 如果是NaN，則 alt 存取到的 `NaN.alt_text` 也不成立，不成立意思就是false，此時 alt 就會改為存取 || 後面的字串。


**至於為什麼 thumb 要改賦予 NaN？其實是我瞎矇到的，**

不確定正統寫法是什麼，但測試發現

1. 寫 `|| undefined` 行不通，因為 `undefined.alt_text` 會等於 `undefined` ，會讓 alt 跟著存取到 undefined，但我希望 alt 存取到自訂的字串。

2. 直接對變數 alt 寫 if 判斷式也行不通

if(item.thumbnail == null){
	 alt = "it's an artpiece but no picture to be shown";
}; //這樣寫行不通

行不通原因是因為變數 alt 要存取的是 thumbnail 的屬性 alt_text，

可是瀏覽器一旦解析到 thumbnail 就會直接報錯 ”Can’t not read property of null”，卡在那邊。

後來才會選擇拆開判斷，先對 thumbnail 判斷一次若為 null 的替代方案，再對 alt 判斷一次替代字串。

## 第二種 null：用圖片ID組合出圖片網址

獲取圖片的網址結構如下：

https://www.artic.edu/iiif/2/{identifier}/full/843,/0/default.jpg

identifier 就是圖片的 id ，必需先取得 `image_id` 才能組出圖片網址。但是有些作品是缺乏`image_id`的，作品本身就是沒有圖片。

let imgID = item.image_id; 
let imgUrl = `https://www.artic.edu/iiif/2/${imgID}/full/843,/0/default.jpg`;

if(imgID == null){
    imgUrl = "img/no-pic.jpg";
 };

解決辦法是寫一個 if 判斷式，判斷 imgID 如果是 null ，則 imgUrl 就直接替換成另一張圖片路徑。

這邊是放一張相對路徑的圖片，圖片則是自製的「No Picture」示意圖。

**為什麼這邊圖片就可以使用 if 判斷，但是上面的 alt 卻行不通？**

- 因為 alt 變數要存的資料是包兩層物件屬性才取到，但是取第一層屬性時就出問題了所以會卡住。

- 而 imgUrl 只是抽換網址，沒有要再往下一層找什麼屬性，所以可以直接抽換掉內容。

替代圖片路徑後，渲染後的圖片會長下面這樣。



最終完成的頁面網址會放在這裡：

https://judy-nihao.github.io/Art-Work-Search-Demo/

如果輸入 Vincent van Gogh 當關鍵字搜尋，就會看到那張缺乏圖片的作品。