MovableTypeのDataAPI画像の取得について

Question

調べていましたが、やり方が不明なので質問失礼します。

前提・実現したいこと

・新着記事内に添付された画像の表示がしたい。
→新着5件表示の上で記事内で添付された画像をサムネイル画像として表示させたいです。

JQuery

修正前
<script>

  const api = new MT.DataAPI({
        baseUrl:  "URL/mt/mt-data-api.cgi",       // mt-data-api.cgi へのパス指定
        clientId: 'token'
  });

var siteId = 2;
var params = {
  limit: 5//5件まで表示する
};


api.listEntries(siteId, params, function(response) {
  if (response.error) {
    return;
  }
  for (i=0; i< response.items.length; i++) {
     jQuery('#title').append('<a href="'+ response.items[i].permalink + '">' + response.items[i].title + '</a>' + '<a href="'+ response.items[i].permalink + '">' +'(詳細はこちら)'+'</a><br>'+ response.items[i].createdDate +'<br><br>');
jQuery('#img').append('<img src="'+ response.items[i].assets + '">' + 'img');

  }
});
</script>

Jquery

修正前
jQuery('#img').append('<img src="'+ response.items[i].assets + '">' + 'img');

修正後
jQuery('#img').append('<img src="'+ response.items[i].assets[i].url + '">');

試したこと

jQuery('#img').append('<img src="'+ response.items[i].assets + '">');
を追加してみたのですが、結果として空白の状態でした・・

補足情報（FW/ツールのバージョンなど）

Movable Type Pro version 6.3.7

###追記
・エラー表示のコメントの件について
エラーの表示はなく、 console.log(response.items[i])を使ってChromeの検証（F12）で確認しましたところ<img src="[object Object]">でありました。

・console.log出力結果
長すぎるため一部ではありますが、必要と思われる個所開いて画像にいたしました。
黒で塗りつぶしているところは、会社のURLなので申し訳ありませんがサブのディレクトリまでしか出せないです。

ベストアンサー後の修正

画像取得できたものの、2件だけしか表示しなくなりました。

 api.listEntries(siteId, params,  function(response) {
  if (response.error) {
    return;
  }
for (i=0; i< response.items.length; i++) {
//jQuery('#result').append($('<li>').append(response.items[i].title));


  for (j = 0; j < response.items[i].assets.length; j++) {
        jQuery('#title').append('<div class=\"box\"><div id=\"all_p\"><img src="'+ response.items[i].assets[j].url + '"width="300px" height="250px"><span id=\"bg\">' + response.items[i].createdDate + '</span><br><a href="'+ response.items[i].permalink + '">' + '<span id="post_title">' + response.items[i].title + '</span></a><br>' + '<div id=\"details_right\"><a href="'+ response.items[i].permalink + '">詳細はこちら\>\>'+'</a></div></div></div></div></p>');
  }
}

Comments

[karamarimo]

エラーは表示されていないでしょうか。また response.error があるとき return するようになっていますが、それは発生していないのでしょうか。

[kirin311]

エラー自体はありませんでした。URLがあってないのか画像が表示されていないという形ですかね。追記という形で質問編集させていただきます。

[karamarimo]

Movable Type については何も知らないのですが、response.items[i].assets には何が入っているのでしょうか。

[kirin311]

表示されないのでおそらく何も入ってないと思います。Movableで投稿された画像のデータはどちらにあるものか検討もつかないです。。

[karamarimo]

どこに画像のurlがあるかはAPIのドキュメンテーションを調べてみるほかありませんよね。[object Object]と表示されているということは object が入っているのでとりあえず console.log で中身を確かめてみてはどうでしょうか。

[Lhankor_Mhy]

ドキュメントを見る限り、エンドポイントが全然違うような気がするのですが、それで合ってますか？

[kirin311]

すみません、エンドポイントとは何でしょうか？私の解釈としては、 baseUrlの部分かと思いますが、合っています。assetsでは表示されませんでしたが、permalinkやtitle等は正常に表示しております。

[kirin311]

追記：一応URLの部分に関しては、企業者様のことなので私個人では少々出せなくて・・

[Lhankor_Mhy]

javascriptSDKを使うと、エンドポイントを意識しなくてよいのですね。失礼しました。ちなみに、response.items[i].assets[0] にするとどうなりますか？

[Lhankor_Mhy]

ん、違うかな？ response.items[i].assets[0].url かも。実行環境がないので、推測なのはご勘弁。

[kirin311]

私もこの時間帯では、自宅にいますので実行環境が・・。明日出勤したときに試してみます。

[Lhankor_Mhy]

参照したのはこちらです。https://www.movabletype.jp/developers/data-api/v3-reference.html#entries　/ 一番早いのは、console.log(response)で中身を見てみることだとは思います。

[kirin311]

ありがとうございます。ただassets[0]のurl部分だけ参照先を読んでも理解できないです・・。assetsに関しては、配列になっていてデータタイプもassetsで読み取り専用ということだけは何となく理解しましたが・・

[kirin311]

明日、console.log(response)で読み込んでその結果を質問編集で追記してみます。

[karamarimo]

スクショは console.log(response.items[i]) の結果でしょうか？また、表示したい画像はスクショの assets[j].url ということですか(すべての j について)？でしたらもう答えは出ていると思いますが、何が分からないのでしょうか？

[kirin311]

はい、ありがとうございます。 console.log(response.items[i])の結果です。assets[j].url を追加させてみましたところ、画像は表示するようになりましたが記事が2件しか表示されなくなりました。さらには、コンソールでUncaught TypeError: Cannot read property 'url' of undefinedというエラーがでるようになってしまいました。。

[kirin311]

追記：2件の記事は、画像が添付されていますが、残りの件数は添付されていませんでした。ということは、これは条件分岐を使うということでしょうか、どのように記述すべきか・・

Answer 1

jQuery('#img').append('<img src="'+ response.items[i].assets[i].url + '">');

iはitemsのインデックスですから、assetsのインデックスとして指定するのは意味をなさないです。forループをあまり理解されていないのではないでしょうか。

各記事ごとにassetの配列をもっているので二重ループになります。

for (let j = 0; j < response.items[i].assets.length; j++) {
  jQuery('#img').append('<img src="'+ response.items[i].assets[j].url + '">');
}

このようにしてみてください。

Comments

[kirin311]

コード入力ありがとうございます。
お恥ずかしながら、勉強中の身です。あまり理解に乏しくお手数をおかけします。

コードについてですが、そのようにしてみましたところ、記事が1件しか表示しなくなりましたのでconst jのところをletにしてみましたところ無事解決いたしました。

ありがとうございました

[karamarimo]

すみません間違えてました．いつも for...of を使うので const にしてしまってました．回答を修正しました．

[kirin311]

修正ありがとうございます。
表示が出来たのでベストアンサーを入れましたが
修正していただいた内容のfor文の中をjQuery('#title～）入れさらにjQuery('#title').append内に入れたところ2件だけになっています・・

ソースコード、再度載せます

[karamarimo]

> ...詳細はこちら\>\>

これは html として間違ってますね。
これが原因かどうかは分かりませんが。
文字列内に expression を埋め込むときはバックティックを使ったほうが楽です。
"eeee" + 3 * 4 + "ffff"
を
`eeee${3 * 4}ffff`
と書くことができます。

[karamarimo]

あと、'...'の中で"をエスケープする必要はないですし、widthの前にスペースが足りません。

[kirin311]

ありがとうございます、修正させていただきます。