質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • jQuery

    6953questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Movable Type

    53questions

    シックス・アパートが開発・提供する,ブログで用いられることの多いCMS製品

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 196

kirin311

score 42

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

 前提・実現したいこと

・新着記事内に添付された画像の表示がしたい。
→新着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なので申し訳ありませんがサブのディレクトリまでしか出せないです。
console.log結果

 ベストアンサー後の修正

画像取得できたものの、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>');
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • karamarimo

    2018/05/11 11:01

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

    キャンセル

  • kirin311

    2018/05/11 11:11 編集

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

    キャンセル

  • kirin311

    2018/05/11 11:30

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

    キャンセル

回答 1

checkベストアンサー

0

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


iitemsのインデックスですから、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 + '">');
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/11 12:01

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

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

    ありがとうございました

    キャンセル

  • 2018/05/11 13:08

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

    キャンセル

  • 2018/05/11 14:14

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


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

    キャンセル

  • 2018/05/11 23:02

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

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

    `eeee${3 * 4}ffff`
    と書くことができます。

    キャンセル

  • 2018/05/11 23:07

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

    キャンセル

  • 2018/05/12 18:45

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • jQuery

    6953questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Movable Type

    53questions

    シックス・アパートが開発・提供する,ブログで用いられることの多いCMS製品