WordPress JSON アイキャッチを取得できない場合の書き方について

Question

お世話になります。弊社本店サイトでWordPressの記事をJSON形式で出力し、 javascriptとHTML、CSSで記事を表示しています。記事のアイキャッチ画像を取得できない場合、現在表示しているJavascriptの記述にどのように記述をすればよろしいでしょうか。 https://www.4860.jp/sub/test/ ブログを表示するJavascriptの記述と、画像が無い場合の代替画像を表示のjavascriptを記述しましたが、表示されませんでした。 ▼参考にしたサイトはこちら https://designsupply-web.com/media/programming/4883/ 取得出来なかった場合の代替画像を表示させる記述方法がございましら、ご教示のほどよろしくお願いします。 $(function(){ $.ajax({ type: 'GET', url: 'https://www.4860-blog.com/wp-json/wp/v2/posts?_embed&categories=813&orderby=id&per_page=20', dataType: 'json' }).done(function(json){ var len = json.length; for(var i=0; i < len; i++){ var title = json[i].title.rendered; var link = json[i].link; var excerpt = json[i].excerpt.rendered; var imgurl = json[i]._embedded['wp:featuredmedia'][0].source_url; var pubDD = new Date(json[i].date); yy = pubDD.getYear();if (yy < 2000) { yy += 1900; } mm = pubDD.getMonth() + 1;dd = pubDD.getDate(); var pubDate = yy +'.'+ mm +'.'+ dd ; var html = ''+'' + pubDate + '' + title +'' + excerpt + ''; $('.top_blog').append(html); } }).fail(function(json){ $('.top_blog').append("読み込みませんでした。"); }); }); const images = document.querySelectorAll('img.blog_img'); //class名があるimgタグ images.forEach((image) => { 　image.addEventListener('undefined',() => { 　　image.setAttribute('src', 'https://www.4860.jp/contents/images/alternative_img.jpg'); //代替画像　}); });

Answer

ECマスターズの北原です。 >取得出来なかった場合の代替画像を表示させる記述方法がございましら、ご教示のほどよろしくお願いします。こちらのようにプログラムを変更することで、代替画像が表示されるようになるかと思います。 $(function () { $.ajax({ type: 'GET', url: 'https://www.4860-blog.com/wp-json/wp/v2/posts?_embed&categories=813&orderby=id&per_page=20', dataType: 'json' }).done(function (json) { var len = json.length; for (var i = 0; i < len; i++) { var title = json[i].title.rendered; var link = json[i].link; var excerpt = json[i].excerpt.rendered; var imgurl = json[i]._embedded['wp:featuredmedia'][0].source_url; var pubDD = new Date(json[i].date); yy = pubDD.getYear(); if (yy < 2000) { yy += 1900; } mm = pubDD.getMonth() + 1; dd = pubDD.getDate(); var pubDate = yy + '.' + mm + '.' + dd; //ーーーーーーーーーーーここからが追加部分です。 if (imgurl == undefined) { // 代替画像のurlに変更 imgurl = 'https://www.4860.jp/contents/images/alternative_img.jpg'; } //ーーーーーーーーーーーここまで追加部分です。 var html = '' + '' + pubDate + '' + title + '' + excerpt + ''; $('.top_blog').append(html); } }).fail(function (json) { $('.top_blog').append("読み込みませんでした。"); }); }); const images = document.querySelectorAll('img.blog_img'); //class名があるimgタグ images.forEach((image) => { image.addEventListener('undefined', () => { image.setAttribute('src', 'https://www.4860.jp/contents/images/alternative_img.jpg'); //代替画像 }); }); 代替画像が表示されなかった原因は、プログラム読み込みのタイミングが違うためです。記事を読み込む前に、部分のスクリプトが動いてしまい、画像読み込み前なのでエラーが出てしまいます。今回の場合は、jsonを読み込んだ際にimgurlに画像のパスが代入されます。画像がない場合は、『undefined』が代入されていますので imgurlに代替画像のurlを上書きするようにしています。分かりづらいところがありましたら、お気軽にご返信くださいませ。よろしくお願い致します。