APIなどでjsonを取得時、中間プロパティが存在しない場合
オプショナルチェーンという方法で解決できたため記載します。
先に結論
解決したコード
// リクエストを投げる処理
console.log(data.items[i].volumeInfo.imageLinks?.thumbnail);
以下の配列でthumbnailが欲しいのにimageLinksのプロパティすらないって場合
console.log(data.items[i].volumeInfo.imageLinks.thumbnail);
オプショナルチェーン [?] を利用することで左側のプロパティが存在するかチェックし、
存在しなければundefinedを返してくれます。
動作環境
ローカル環境でHTML, CSS, JS, jQueryを使用
※Chromeで動作確認
解決したい課題
今回はGoogle Books APIを利用して簡単なWEBアプリを作成する際に発生しました。
APIで40件取得したところ以下のようにエラーが発生します。
投げたリクエスト
https://www.googleapis.com/books/v1/volumes?q=aws&maxResults=40
正常なレスポンス
サンプルコード
// リクエストを投げる処理
console.log(data.items[i].volumeInfo.imageLinks.thumbnail);
エラー結果
data.items[i].volumeInfo.imageLinks.thumbnailが取得できずエラーになっていますが、
返ってきたAPIを確認するとimageLinks自体が存在しないアイテムがあるようです。
undefinedの場所が固定であればifで条件分岐ができますが、
対応方法に悩んでいた（ネストも多いしめんどくさい・・・・・）
ところオプショナルチェーンで解決できました。
対応方法
オプショナルチェーン
JavaScriptのオプショナルチェーン?.は、オブジェクトのプロパティが存在しない場合でも、
エラーを起こさずにプロパティを参照できる安全な方法です。
プロパティ自体が存在しない場合上記のようにエラーが発生し処理が止まってしまいます。
オプショナルチェーンを使用すれば結果はnullもしくはundefinedで返却されるため処理の停止は避けられます。
解決したコード
// リクエストを投げる処理
console.log(data.items[i].volumeInfo.imageLinks?.thumbnail);
? を入れるとこのプロパティにアクセスした場合、
左側のプロパティが存在するかをチェックし、存在しなければundefinedと返却されます。
極端ですが以下のように複数使用することもOKです。
※ただし、? 以前の変数は定義されている必要があります。dataの定義は必要です。
// リクエストを投げる処理
console.log(data?.items[i]?.volumeInfo?.imageLinks?.thumbnail);
結果
無事undefinedが返ってきて処理が止まらずに済みました～！！
参考記事