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

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

ただいまの
回答率

90.11%

楽天APIをjqueryでジャンルごとに表示させたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 433

shimirey

score 10

前提・実現したいこと

jsonで返ってきたデータを1ページの中でジャンル別に分けて、HTMLに表示したい

発生している問題・エラーメッセージ

楽天APIのjsonで返ってきた値を、以下のようなjqueryでhtmlに表示させることはできたのですが、
これをジャンルIDごとに分けて1ページの中で表示させるには、どうすればいいかがわかりません。

実現したいことはこちらの画像のようなイメージです。
イメージ説明

そもそも1ページの中でそれができるのかが不明です。
そもそもの考え方が間違っているのかも含めアドバイスいただけたらと思います。
どうぞよろしくお願いいたします。

該当のソースコード

ソースコード

<div class="wrapper">

<div class="secItem secCommon">
<div class="secInner">
<ul id="contentInner"></ul>
</div>
</div>

</div>  




<script>
    $(function() {

  let APPID = '1039307596918591316'; //アプリID *必須
  let MAX_PAGE = 10; //最大取得ページ件数(1ページ30件)。この場合3ページ = 90件取得。
  let SHOP_CODE = 'sampleshop'; //ショップコード(店舗を指定したい場合)
  //let genreId = "510890"; //絞り込みしたいジャンル
  //let SORT = '-reviewCount'; //レビューの多い順

  function put_item(item) {
    //ループで表示したいHTML部分を作成します
    $("#contentInner").append(
      `
      <li>
      <dl>
      <dt><a href="${item.itemUrl}" target="_blank"><img src="${item.mediumImageUrls[0].imageUrl.replace('?_ex=128x128', '')}" width="100%"></a></dt>

      <dd class="itemPrice">${item.itemPrice}<span>円(税込)</span></dd>

      </dl>
      </li>
      `
    );
  }

  //ajax
  function search_rakuten(page) {
    $.ajax({
      url: 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&applicationId=' + APPID +
              '&shopCode=' + SHOP_CODE + //店舗を指定しない場合は不要
              //'&keyword=' + KEYWORD +
             // '&sort=' + SORT +
              '&page=' + page,
      type: 'get',
      dataType: 'json',
      timeout: 10000,
      async: 'true'
    })
    .done(function(data) {
      //読み込み成功時の処理
      goods = data.Items;
      for (let i in goods) {
        put_item(goods[i].Item);
      }
      //MAX_PAGEで設定した数値になるまでループします
      if (page < MAX_PAGE) {
       search_rakuten(page + 1);
      }
    })
    .fail(function(data) {
      //読み込み失敗時の処理
      console.log('読み込みエラー');
    });
  }

  search_rakuten(1);

});
    </script>
 "Item": {
        "itemName": "メンズ ワッフル素材 コットンガウン バスローブ ルームウェア 【楽天海外直送】",
        "catchcopy": "部屋着 寝巻き ルームガウン パジャマ カーディガン",
        "itemCode": "pertemba:10008241",
        "itemPrice": 3363,
        "itemCaption": "商品説明・ メンズルームガウン。・ クールコットン素材。・ 英国でデザインされました。・ 肌触りソフト。・ ルームウェアとして最適。・ 表面に凸凹のあるワッフルテクスチャー。・ ポケットx2。・ 3色展開。・ 素材:コットン100%。・ 液温30度以下で洗濯機洗い可。 カラーブラックネイビーホワイト",
        "itemUrl": "https://item.rakuten.co.jp/abcde/utn1055/",
        "shopUrl": "https://www.rakuten.co.jp/abcde/",
        "smallImageUrls": [
          {
            "imageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/abcde/cabinet/img15/utn1055-montage.jpg?_ex=64x64"
          },
          {
            "imageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/abcde/cabinet/mimg15/mega-lutn1055.jpg?_ex=64x64"
          },
          {
            "imageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/abcde/cabinet/mimg15/mega-lutn1055-1.jpg?_ex=64x64"
          }
        ],
        "mediumImageUrls": [
          {
            "imageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/abcde/cabinet/img15/utn1055-montage.jpg?_ex=128x128"
          },
          {
            "imageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/abcde/cabinet/mimg15/mega-lutn1055.jpg?_ex=128x128"
          },
          {
            "imageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/abcde/cabinet/mimg15/mega-lutn1055-1.jpg?_ex=128x128"
          }
        ],
        "affiliateUrl": "",
        "shopAffiliateUrl": "",
        "imageFlag": 1,
        "availability": 1,
        "taxFlag": 0,
        "postageFlag": 1,
        "creditCardFlag": 1,
        "shopOfTheYearFlag": 0,
        "shipOverseasFlag": 0,
        "shipOverseasArea": "",
        "asurakuFlag": 0,
        "asurakuClosingTime": "",
        "asurakuArea": "",
        "affiliateRate": 1,
        "startTime": "",
        "endTime": "",
        "reviewCount": 0,
        "reviewAverage": 0,
        "pointRate": 1,
        "pointRateStartTime": "",
        "pointRateEndTime": "",
        "giftFlag": 0,
        "shopName": "Pertemba Japan",
        "shopCode": "pertemba",
        "genreId": "510890",
        "tagIds": [
          1000317,
          1000318,
          1000319,
          1000320,
          1000873,
          1000886,
          1003434,
          1004015
        ]
      }
    },
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • kei344

    2019/03/25 03:18

    itemの中身を提示されては。

    キャンセル

  • asahina1979

    2019/03/25 08:19

    できるか、できないかでの回答だとできるになる。
    完成形を先に考えて分解しましょう

    キャンセル

  • noka_blank

    2019/03/25 21:11

    APIのパラメータにジャンルIDを指定できるはずですので、必要な分だけajax通信すれば良いと思います。

    キャンセル

  • shimirey

    2019/03/30 01:47

    折角回答いただいたのに、そもそものプログラミング知識が不足しており、ヒントだけでは解決できそうもありません、、出直して参ります、、、
    回答ありがとうございました。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 90.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる