楽天WebAPIで取得した本のデータを整形・出力したい

Question

下記の楽天APIを用いて本の情報を取得、表示しようとしています。

受け取ったJSONをパースし、ページに出力したいのですが、うまくいきません。

・参考資料
楽天API詳細
APIをテストできるページ

上記を元にaxiosを使ってコードを書いたのが以下です。

const actions = {
  async doSearch({ commit }, keyword) {
    const APIkey = "xxxxxxxxxxxxxxxxxxxxxxx";
    const limit = 3;
    const url = `https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&formatVersion=2&keyword=${keyword}&hits=${limit}&applicationId=${APIkey}`;
    const results = await axios.get(url);
// 通信ここまで
    console.log("results fetched");
//　JSON形式なのでオブジェクト型に変換
    const data = JSON.parse(results);
// 各配列内の商品名（itemName）を取り出す
    const name = data.Items.map(o => o.itemName);
    for (var i = 0; i < name.length; i++) {
      console.log(name[i]);
    }

    const imageUrls = data.map(o => o.mediumImageUrls.imageUrl);
    console.log(imageUrls);

formatVersionというパラメータ設定で、mapも使えるようにしたつもりなのですが、name,imageURLsの出力ができずにいます。

お手数おかけしますが、アドバイスよろしくお願いします。

Answer 1

オブジェクトの肩が違うとかはないでしょうか？
こちらでapiを叩いてみると、

type 返ってくるObj = {
  count:number,
  page:number,
  ...(略)...
  Items:[
    Item: {
       title:string,
       ...(略)...
       smallImageUrl:string,
       mediumImageUrl:string,
       largeImageUrl:string,
       ...(略)...
    }
  ]
}

となっていましたので、本の名前と画像を持ってきたいのであれば

const name = data.Items.map(o => o.Item.title);

const imageUrls = data.map(o => o.Item.mediumImageUrl);

とするのが正しいように思えます。

Comments

[marutto]

回答ありがとうございます。

返ってきた値をキチンと見直したら、情報の取り出し方が分かりました！
APIから送られてきた情報はdataというプロパティに入っていて、さらにその中にItemsが入っているのですね。

アドバイスのお陰で気付けました。ありがとうございました！