Ajaxを利用してAPI実装

実現したいこと

ここに実現したいことを箇条書きで書いてください。

図書館の本検索機能のAPIをjQueryで実装したい。

前提

現在APIで簡単な図書館の本を検索する機能を実装しています。
いろいろなサイトやchatGPTを利用しながら制作しているのですが検索結果はおろかエラーも表示されません。
コンソールでもエラーがでていないのでなぜこれがいけないのか分からないです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <link rel="stylesheet" href="./css/reset.css">
9  <link rel="stylesheet" href="./css/base.css">
10  <link rel="stylesheet" href="./css/style.css">
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
12</head>
13
14<body>
15  <header class="header">
16    <p>Search CiNii Book</p>
17  </header>
18  <main class="main">
19    <section class="search-area">
20      <input id="search-input" type="text" placeholder="検索ワード">
21      <button class="search-btn btn">検索</button>
22      <button class="reset-btn btn">リセット</button>
23    </section>
24    <section class="list-area">
25      <div class="inner">
26        <ul class="lists"></ul>
27      </div>
28    </section>
29    <script src="./js/app.js"></script>
30
31  </main>
32</body>
33
34</html>

jQuery
1"use strict";
2
3$(function () {
4  let pageNumber = 1;
5  let previousSearchWord = "";
6
7  $("#search-button").on("click", function () {
8    const searchWord = $("#search-input").val();
9    if (searchWord !== previousSearchWord) {//サーチワードと前回のワードが異なる場合、ページを１にリセットし、リストをemptyで無にする。
10      pageNumber = 1;
11      $(".lists").empty();
12      previousSearchWord = searchWord;
13    } else {
14      pageNumber++;//同じ検索ワードが使用されている場合はページ数を増やす。
15    }
16
17    const apiSettings = {
18      "url": `https://ci.nii.ac.jp/books/opensearch/search?title=${searchWord}&format=json&p=${pageNumber}&count=20`,
19      "method": "GET",
20    };
21
22    $.ajax(apiSettings)
23      .done(function (response) {
24        const success = response['@graph'];
25        displayResults(success);
26      })//リクエストが成功すると変数サクセスを表示させる。
27      .fail(function (err) {
28        displayError(err);
29      });//リクエストが失敗すると変数エラーを表示させる。
30  });
31
32  $(".reset-btn").on("click", function () {
33    pageNumber = 1;
34    previousSearchWord = "";
35    $(".lists").empty();
36    $("#search-input").val("");
37    $(".message").remove();
38  });//リセットボタンを押すとページ数を１に、検索結果と条件をリセット
39
40  function displayResults(success) {
41    if (success && success.length > 0) {//１つ以上のsuccessがある時に実行
42      const extractedData = success.map(item => ({//extractedDateという関数にsuccessからデータを格納。
43        title: item.title || "タイトル不明",
44        author: item["dc:creator"] || "著者不明",
45        publisher: item["dc:publisher"] ? item["dc:publisher"][0] : "出版社不明",
46        link: item.link["@id"]
47      }));
48      if (extractedData.length > 0) {
49        $.each(extractedData, function (i,item) {
50          const listItem = `<li class="lists-item">
51            <div class="list-inner">
52              <p>タイトル：${item.title}</p>
53              <p>著者：${item.author}</p>
54              <p>出版社：${item.publisher}</p>
55              <a href="${item.link}" target="_blank">書籍情報</a>
56            </div>
57          </li>`;
58          $(".lists").prepend(listItem);
59        });
60      } else {//検索結果が１つもなかった場合メッセージを表示
61        $(".lists").before('<div class="message">検索結果が見つかりませんでした。</div>');
62      }
63    }
64  }
65
66  function displayError(err) {//APIがうまく送信されなかったときのエラー
67    $(".lists").before('<div class="message">エラーが発生しました。<br>再度更新してください。</div>');
68  }
69});
70
71//  変数settingsに設定情報などを格納
72// const settings = {
73//    実行するURL。実行するURLのことをエンドポイントと言います。
74//   "url": `https://ci.nii.ac.jp/books/opensearch/search?
75//   title=${searchWord}&format=json&p=${pageCount}&count=20`,
76//    サーバーに送るメソッド
77//   "method": "GET",
78//   }
79//    Ajaxの実行
80//   .doneが通信成功した時の処理、”response”が引数となっていて通信した結果を受け取ってい
81//   る
82//   $.ajax(settings).done(function (response) {
83//   .failが通信に失敗した時の処理、”err”にサーバーから送られてきたエラー内容を受け取って
84//   いる。
85//   }).fail(function (err) {
86//   });
87
88
89
90

試したこと

displayを多用しがちだったのでその関数を変更しました。(今は成功した物ということでsuccessになっています)
またeachでこのように記載していたものをmap関数を使うことで展開してみました。

``` $.each(results, function (index, item) {
        const listItem = `<li class="lists-item">
          <div class="list-inner">
            <p>タイトル：${item.title || "タイトル不明"}</p>
            <p>著者：${item["dc:creator"] || "著者不明"}</p>
            <p>出版社：${item["dc:publisher"] ? item["dc:publisher"][0] : "出版社不明"}</p>
            <a href="${item.link["@id"]}" target="_blank">書籍情報</a>
          </div>
        </li>`;
        $(".lists").prepend(listItem);

有識者の方にお力添えいただければ幸いです。

yambejp

2023/11/20 00:16

そろそろ新規案件であればjQueryはやめたほうがよいかも XHRであればfetchで十分です

otn

2023/11/20 11:24

> Ajaxを利用してAPI実装意味不明だと中身を読むと、「APIを実装」じゃなくて「APIを呼び出し(or利用)」ですね。「APIを実装」と書くと貴方が使おうとしているサイト https://ci.nii.ac.jp/books/opensearch のようなAPIを提供するサーバー機能を作ることを意味します。

aika0066

2023/11/20 15:52

＞yambejpさんご指摘ありがとうございます。会社のまずは基本の研修ということでjQueryの課題で勉強をしております。そのためエンジニア見習いにもまだ立っておらず、現状の流行でしたり開発環境も分からない部分が多いです。初学者ゆえXHRであればfetchというご指摘も、お恥ずかしながらそのようなものがあったのだと初めての知識でした。今後の新たな知識として取り入れさせていただきます。＞otnさんありがとうございます。語彙は正しく使うべきですね。エンジニアには多くの用語があり、いまだにすべてが正しく理解できているわけではないと自覚しております。 ”自分が開発しているものが何か”は説明できるよう、今後の勉強に生かし改めさせていただきますね。

行動規範の内容に同意します

回答1件

要素名が合っていないです。

JavaScript
1$("#search-button").on("click", function () {
2　↓
3$(".search-btn").on("click", function () {

投稿2023/11/19 23:34

tabuu

総合スコア2492

aika0066

2023/11/20 06:21

ありがとうございます！なんという初歩的なミス……無事にメッセージが表示されるようになりました。加えてもう一つ分からないことがあり、コンソールログで index.html:1 Access to XMLHttpRequest at 'https://ci.nii.ac.jp/books/opensearch/search?title=&format=json&p=2&count=20' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. おそらくAccess-Control-Allow-Origin：*等をヘッダーに追加しろと書いてあるのだと思いますが、レスポンスの際のhttpヘッダに「Access-Control-Allow-Origin: *」を指定していますので、クロスドメイン間での非同期通信をご利用いただけます、と提供先に記載がありサーバー側でも問題なさそうに見えます。なぜこのエラーが起こるのでしょうか…？重ね重ねになりますが教えていただけますと幸いです。

Lhankor_Mhy

2023/11/21 01:30

横から失礼します。 https://ci.nii.ac.jp/books/opensearch/search?title=&format=json&p=2&count=20 ↑このリンクを踏むと400エラーが返ってきますので、それが原因ではないでしょうか。多くのAPIで、ステータスエラーを返す際には Access-Control-Allow-Origin が付されません。ですので、APIの応答でCORS違反が出る時は、その他のエラーも疑った方がいい場合があります。

行動規範の内容に同意します