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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

3049閲覧

Ajaxを使った検索機能の作成(楽天ブックスAPI)

tomo1107

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/04/02 17:16

前提・実現したいこと

検索ボックスにキーワードを入れ、検索ボタンを押した時に、楽天ブックスAPIからデータを取得し20件ずつ一覧に表示する。
別のワードで検索した時、最初の20件は削除され、次の新しい20件が表示されるようにし、同じワードで検索した時は、最初の20件の上に21件目から40件目が表示されるようにしたいです。
よろしくお願いいたします。

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

現在、別のワードのところまでは上手くいったのですが、同じワードで検索した際に、最初の20件の下に21~40件目が表示されてしまいます。
イメージとしては、下記のような感じです。

<ul class="lists"> **→ここに<li></li>21~40件目を追加したい** <li class = "lists__item">...</li> // 0        // <li></li> 1~18 // <li class = "lists__item">...</li> // 19 **→現在はこっちに<li></li>21~40件目が追加されてしまっている。** </ul>

該当のソースコード

<script> $(function() { var pageNum = 0; // pageNumという変数に0と宣言 var prevword = ''; // prevwordという変数に空の文字列を定義 // 0件だった時の関数 var zeroMessage = function() { // zeroMessageという変数に次の関数を定義 $('.lists').after('<div class = "coment"></div>') // listsの後にクラスを追加 coment = $('.coment'); // comentに.comentを定義 coment.html('<p class = "message">検索結果が0件でした。<br>キーワードを変えて検索してください。</p>'); // comentにhtmlメソッドを用いて、0件だった時のコメントを追加 }; var failMessage = function() { // failMessageという変数に次の関数を定義 $('.lists').after('<div class = "datacoment"></div>') // listsの後にクラスを追加 datacoment = $('.datacoment'); // datacomentに.datacomentを定義 datacoment.html('<p class = "failmessage">データ通信できませんでした。<br>接続を確認してください。</p>'); // datacomentに失敗した時のコメントを追加 }; var success = function(data) { if(data.count > 0) { // data.countが0よりも大きいとき $.each(data.Items,function(i,item) { // data.Itemsに対して次の関数を繰り返し実行 var list = ''; list += '<li class = "lists__item">' + i + '<div class="lists__item__inner">' + '<a href="' + item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item.largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + '<p class="lists__item__detail">作品名: ' + item.Item.title + '</p>' + '<p class="lists__item__detail">作者 : ' + item.Item.author + '</p>' + '<p class="lists__item__detail">出版社: ' + item.Item.publisherName + '</p>' + '</a>' + '</div>' + '</li>'; // listという変数にテンプレートを代入 var contentsList = $('.lists').append(list); // listsの後にlistを追加を変数contentsListに定義 ** // ここから** if(pageNum > 1) { // 2ページ目以降の時 $('.lists').prepend(contentsList); // .listsの前にcontentsListを追加 **// ここの3行に問題がありそうです。** } }) } else if(data.count === 0) { // data.countが0件だった時 zeroMessage(); // 先程定義した関数を実行 } }; var search__btn = function() { // .search__btnがクリックされた時の処理 pageNum = pageNum + 1; //変数pageNumに1ずつ加算 var searchword = $('#js-search-word').val(); // searchwordという変数に#js-search-wordを定義。#js-search-wordのval属性を取得 if(prevword !== searchword) { // prevwordがsearchwordと異なるとき pageNum = 1; // pageNumを1にする $('ul').empty(); // ulの中身を空にする prevword = searchword; // searchwordにprevwordを保存 } console.log(searchword); $.ajax({ // データの取得 url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { applicationId: '', booksGenreId: '001', size: '0', hits: '20', page: pageNum, keyword: searchword, } }) .done(function(data) { // データ通信に成功した場合 success(data); }).fail(function() { // データ通信に失敗した場合 failMessage(); // 先程定義した関数を実行 }) }; $('.search__btn').on('click',function() { search__btn(); // 定義したsearch__btnという関数の実行 }); }); </script>

試したこと

append,prepend,before,afterなど追加するメソッドを色々試してみました。
しかし、単純に上に追加されなかったり、追加されたと思えば下記のように21~40件目が逆になってしまったりしています...

<li class = "lists__item">...</li> // 39 <li>...</li> //38~21 次の20件(21~40) // <li class = "lists__item">...</li> // 20 <li class = "lists__item">...</li> // 0 <li>...</li> //1~18 最初の20件(1~20) // <li class = "lists__item">...</li> // 19

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

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>jQuery</title> <link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/base.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="wrap"> <div class="container"> <div class="header"> <p class="header__title">Search Books!</p> </div> <div class="search"> <div class="search__text"> <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する"> </div> <button id="js-search-button" class="search__btn">検索する</button> </div> <ul class="lists"> **//この部分にテンプレートのlistが入ります//** </ul> </div> </div> <script src="../../common/js/jquery.js"></script>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

動作確認してないですが、変数listをループの外に出して、全部を作成し終わってからprependするのはダメですか?

js

1 var list = ''; 2 $.each(data.Items,function(i,item) { // data.Itemsに対して次の関数を繰り返し実行 3 list += '<li class = "lists__item">' + i + '<div class="lists__item__inner">' + '<a href="' + item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item.largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + '<p class="lists__item__detail">作品名: ' + item.Item.title + '</p>' + '<p class="lists__item__detail">作者 : ' + item.Item.author + '</p>' + '<p class="lists__item__detail">出版社: ' + item.Item.publisherName + '</p>' + '</a>' + '</div>' + '</li>'; // listという変数にテンプレートを代入 4 }) 5 $('.lists').prepend(contentsList); // .listsの前にcontentsListを追加

投稿2019/04/03 00:38

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomo1107

2019/04/03 00:55

試してみます! ありがとうございます。
tomo1107

2019/04/03 01:31

上手くできました! ありがとうございます! 問題としては、ループの中で変数に定義していたからでしょうか? prependの方ですか?
Lhankor_Mhy

2019/04/03 02:24

はい、ループの中で変数に定義していたからです。var で宣言しているので、ループごとに値がリセットされます。
Lhankor_Mhy

2019/04/03 02:25

あ、prependする変数名を間違えていましたね。失礼しました。
tomo1107

2019/04/03 10:37

なるほど… いえ!とても助かりました! ありがとうございましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問