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

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

ただいまの
回答率

88.81%

iTunes APIを使った検索フォームでajaxでの検索結果表示をさせたいのですが、parse errorで詰まっています

解決済

回答 1

投稿 編集

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

natecosan

score 23

前提・実現したいこと

初心者です。現在railsチュートリアルをベースにしつつ、音楽の投稿webサービスを作っています。
iTunesAPIを使って、
アーティスト名とアルバムタイトルから検索→アルバムジャケットを表示
という機能を作りたいと思っています。
本来的にはrailsを使って実装したいのですが、jQueryやAjaxの基礎的な知識がまだまだ足りておらず、とりあえず試しにjQuery $.ajaxで通信を行ってJSONを取得するサンプルのコードをアレンジしてajax表示をさせてみようと奮闘しております。

iTunes APIの使い方まとめによると、
https://itunes.apple.com/search
に検索パラメータとして

       term: "Ladygaga" ,#検索キーワード
        country: 'jp' , #国
        media: 'music' , #メディアジャンル
        entity: 'album' , #メディアジャンルの詳細カテゴリ
        lang: 'ja_jp', #言語
        limit: '10' #取得件数

をリクエストすると、jsonで返ってくる仕様とのことです。
今回はそのresultsの中でも「artistName」を取得したいです。

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

レスポンスは200になるのですが、parseerrorが発生してしまいます。
また、この「:」のシンタックスエラーがどこで発生しているのか分からないです...

jqXHR.statusを表示:200

textStatusを表示:parsererror

errorThrownを表示:SyntaxError: Unexpected token :

該当のソースコード

参考にしているサイトのソースコードを少し変更しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのajaxのサンプル</title>
<!--<script src="https://itunes.apple.com/search?&callback=search"></script>-->
<script>
$( function() {

$("#button1").click(
function search(){
    $("#span6").text("データ取得中です");

    // 1.$.ajaxメソッドで通信を行います。
    //  20行目のdataは、フォームの内容をserialize()している
    //  →serialize()の内容は、cs1=custom1&cs2=custom2
    $.ajax({
        url:"https://itunes.apple.com/search?", // 通信先のURL
        type:"GET",        // 使用するHTTPメソッド
        data: {
        term: "Ladygaga" ,
        country: 'jp' ,
        media: 'music' ,
        entity: 'album' ,
        lang: 'ja_jp',
        limit: '10'
    },
        timespan:1000         // 通信のタイムアウトの設定(ミリ秒)

        // 2. doneは、通信に成功した時に実行される
        //  引数のdata1は、通信で取得したデータ
        //  引数のtextStatusは、通信結果のステータス
        //  引数のjqXHRは、XMLHttpRequestオブジェクト
        }).done(function(data) {
        var result = data.results[0];
        $('#artistname').val(result.artistName)

                // 3. キーを指定して値を表示
                $("#span4").text(data1["form"]["cs1"]);

                // 4. JavaScriptオブジェクトをJSONに変換
                var data2 = JSON.stringify(data1);
                console.log(data2); //コンソールにJSONが表示される

                // 5.JSONをJavaScriptオブジェクトにし、
                // キーを指定して値(httpbin.org)を表示
                var data3 = JSON.parse(data2);
                $("#span5").text(data3["headers"]["Host"]);

        // 6. failは、通信に失敗した時に実行される
        }).fail(function(jqXHR, textStatus, errorThrown ) {
                $("#span1").text(jqXHR.status); //例:404
                $("#span2").text(textStatus); //例:error
                $("#span3").text(errorThrown); //例:NOT FOUND

        // 7. alwaysは、成功/失敗に関わらず実行される
        }).always(function(){
                $("#span6").text("complete");

    });
});
});
</script>
</head>
<body >
<p>jqXHR.statusを表示:<span id="span1"></span></p>
<p>textStatusを表示:<span id="span2"></span></p>
<p>errorThrownを表示:<span id="span3"></span></p>
<p>表示1:<span id="span4"></span></p>
<p>表示2:<span id="span5"></span></p>
<p>表示3:<span id="span6"></span></p>
<p>アーティスト名:<span id="artistname"></span></p>

<p>ボタンを押すと通信が始まります</p>

<form id="form1">
<input type="button" id="button1" value="ボタン1">
<p>テキストボックス1</p>
<input type="text" name="artistterm" value="custom1" maxlength="10">
<p>テキストボックス2</p>
<input type="text" name="albumterm" value="custom2" maxlength="10">
</form>
</body>
</html>

試したこと

$.ajaxでステータスコード200なのにerrorで処理される
この記事を参考に、datatypeをjsonに指定したりしたのですが、むしろそれだとボタンを押しても動かないといった状況に陥ってしまいました。

追記

chromeのコンソールで以下を実行すると、データ自体は返ってきているもようです。

$.ajax({
        url:"https://itunes.apple.com/search?", // 通信先のURL
        type:"GET",        // 使用するHTTPメソッド
        data: {
        term: "Ladygaga" ,
        country: 'jp' ,
        media: 'music' ,
        entity: 'album' ,
        lang: 'ja_jp',
        limit: '10'
    },
        timespan:1000         // 通信のタイムアウトの設定(ミリ秒)

        // 2. doneは、通信に成功した時に実行される
        //  引数のdata1は、通信で取得したデータ
        //  引数のtextStatusは、通信結果のステータス
        //  引数のjqXHRは、XMLHttpRequestオブジェクト
        }).done(function(data) {
        var result = data.results[0];
        $('#artistname').val(result.artistName)

                // 3. キーを指定して値を表示
                $("#span4").text(data1["form"]["cs1"]);

                // 4. JavaScriptオブジェクトをJSONに変換
                var data2 = JSON.stringify(data1);
                console.log(data2); //コンソールにJSONが表示される

                // 5.JSONをJavaScriptオブジェクトにし、
                // キーを指定して値(httpbin.org)を表示
                var data3 = JSON.parse(data2);
                $("#span5").text(data3["headers"]["Host"]);

        // 6. failは、通信に失敗した時に実行される
        }).fail(function(jqXHR, textStatus, errorThrown ) {
                $("#span1").text(jqXHR.status); //例:404
                $("#span2").text(textStatus); //例:error
                $("#span3").text(errorThrown); //例:NOT FOUND

        // 7. alwaysは、成功/失敗に関わらず実行される
        }).always(function(){
                $("#span6").text("complete");

    });


以下スクショ
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/05/20 22:16

    レスポンスなのでapi側でおきてるように思います。正しくパラメータ渡せてないとか何かで向こう側でエラーになってそうに思います。jsonでレスポンス返ってくるならなおさらですね。
    apiの返り値とかで判断できそうな情報ありませんか?

    キャンセル

  • natecosan

    2019/05/20 22:58

    一応、chromeのコンソールで確認できる部分を追加しました。
    中身でどこを見たらいいのか分からず、、、ご指示いただけると幸いです。

    キャンセル

  • natecosan

    2019/05/20 23:03

    あと公式の方で、検索フォームを作る場合はコールバックを指定してくださいとの記述があるのですが、関係していますでしょうか。APIのコールバックについて基本的な仕組みは調べて理解したのですが、この場合での使い方がよく分からず、、、

    キャンセル

  • m.ts10806

    2019/05/20 23:08

    とれてますね。responseTextで。
    返却の形式からするとdataTypeをJSONにしたら、データ取り出しやすくなると思います。
    http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
    あと確認してほしかったのはAPIのマニュアルの方ですね。
    結局のところdoneなりfailに書いた内容が実行結果のコールバック関数となるので、実装は出来ているように思います。

    キャンセル

回答 1

checkベストアンサー

0

ぼくの環境では下記で取得できました。ただ、取得できたことを確認したのみで、APIの利用規約などは見ていません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
    $('#button1').on('click', function() {
        $.ajax({
            url: 'https://itunes.apple.com/search?',
            type: 'GET',
            data: {
                term: 'Ladygaga',
                country: 'jp',
                media: 'music',
                entity: 'album',
                lang: 'ja_jp',
                limit: '10'
            },
            dataType: 'json',
            timespan: 1000
        }).done(function(data) {
            var result = data.results[0];
            $('#artistname').text(result.artistName);
        });
    });
});
</script>
</head>
<body>
<p>アーティスト名:<span id="artistname"></span></p>
<p>ボタンを押すと通信が始まります</p>
<form id="form1">
<input type="button" id="button1" value="ボタン">
</form>
</body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/22 22:06

    ありがとうございました!!こちらで取得できました。

    キャンセル

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

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

関連した質問

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

  • トップ
  • HTMLに関する質問
  • iTunes APIを使った検索フォームでajaxでの検索結果表示をさせたいのですが、parse errorで詰まっています