ajaxで取得したjsonのnull判定ができない。

Question

前提・実現したいこと

現在、openbdという本の情報を取得できるapiを使用し、本のレビューアプリを作成しています。
実現したいこととしてはif文で取得した値のnullを判定し、「本の情報がありません」旨を表示させたいです。

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

ソースコードのように記述していますが、nullを判定できず、条件分岐してくれません。

https://api.openbd.jp/v1/get?isbn=1241の様に適当な数字を入れ実行したところ、
ブラウザ上には[null]と表示されました。

chromeでの検証結果

[null]
0: null
length: 1
__proto__: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
arguments: (...)
caller: (...)
length: 1
name: "reduceRight"
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__: Object

存在しない数字を入れた場合のchrome developer tools上のエラー

Uncaught TypeError: Cannot read property 'summary' of null
    at buildHtml (books.self-cf274625d10f3ce57f6688d7617e8fe8605e8ef10ac2ff3e48f64e8444310545.js?body=1:3)
    at Object.<anonymous> (books.self-cf274625d10f3ce57f6688d7617e8fe8605e8ef10ac2ff3e48f64e8444310545.js?body=1:19)
    at fire (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269)
    at Object.fireWith [as resolveWith] (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399)
    at done (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9306)
    at XMLHttpRequest.<anonymous> (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9549)
buildHtml @ books.self-cf274625d10f3ce57f6688d7617e8fe8605e8ef10ac2ff3e48f64e8444310545.js?body=1:3
(anonymous) @ books.self-cf274625d10f3ce57f6688d7617e8fe8605e8ef10ac2ff3e48f64e8444310545.js?body=1:19
fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269
fireWith @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399
done @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9306
(anonymous) @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9549
load (async)
send @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9568
ajax @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9207
(anonymous) @ books.self-cf274625d10f3ce57f6688d7617e8fe8605e8ef10ac2ff3e48f64e8444310545.js?body=1:12
dispatch @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184
elemData.handle @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992

該当のソースコード

$(document).on('turbolinks:load', function() {
    function buildHtml(book) {
        var image = '<img "width="150" height="150" + src="' + book[0].summary.cover + '">';
        return image;
    }
    var formResult = $('#new_review');
    $('#submit').on("click",function(e) {
        e.preventDefault();
        var bookName = $('#get-book').find('#isbn').prop('value');
        var requestUrl = 'https://api.openbd.jp/v1/get?isbn=';
        requestUrl += bookName + '&pretty';
        $.ajax({
            type:"GET",
            url:requestUrl,
            dataType:"json"
        })
            .done(function(data) {
                console.log(data)
                var image = buildHtml(data);
                if (data[0] != null){
                    $('#book-name').val(data[0].summary.title);
                    $('#author-name').val(data[0].summary.author);
                    $('#image_url').val(data[0].summary.cover);
                    $('.book_image').append(image);
                    formResult.css('display', 'block');
                }
                else{
                    $('.result').append("<p>can't get information</p>")
                }
            })
            .fail(function() {
                alert('情報の取得に失敗しました');
            });
    });
});

試したこと

elseif文を追加し「data[0].summary.title == null」などにしても条件分岐してくれませんでした。

Answer 1

条件文の前に参照しているのが原因だと思います。

$(document).on('turbolinks:load', function() {
    function buildHtml(book) {
        var image = '<img "width="150" height="150" + src="' + book[0].summary.cover + '">';  // ←　ここ
        return image;
    }
//...
                var image = buildHtml(data);  // ←　ここで呼び出してる。
                if (data[0] != null){
//...
});

Comments

[yuukihayashi]

ご回答ありがとうございます。
頂きました回答をもとにvar image = buildHtml(data);をif文の中に含んだところ正常に処理が行われるようになりました。

Answer 2

https://api.openbd.jp/v1/get?isbn=1241 を Chrome のアドレスバーに貼り付けて要求を出してみましたが、確かに [null] が返ってきますね。

クロスドメインの問題かとも思いましたが、要求・応答を Fiddler でキャプチャしてみると Access-Control-Allow-Origin: * と CORS 対応になっているようで ajax でも応答は返ってくるはず。

ということは、質問者さんの書かれた処理（JavaScript のコード）に問題がありそうな気がしますが、Chrome のディベロッパーツールなどを使ってデバッグ・確認できないですか？

【追記】

Visual Studio 2015 で IE11 を使ってデバッグしてみましたが、data[0] が null か否かで判定して良さそうです。質問者さんのコードは if (data[0] != null) ですよね？　何が違うんだろう・・・

Comments

[yuukihayashi]

ご回答ありがとうございます。
私もデバック方法があまりわからず、ご回答できておりませんでした。
結果的には、Lhankor_Mhy様にご回答頂いた
if文の中に以下を含めることで正常に動作するようになりました。
var image = buildHtml(data);

[退会済みユーザー]

デバッグ出来るようになりましょう。Fiddler などのキャプチャツールを使えるようになりましょう。それなしでは闇夜に鉄砲という感じで開発はおぼつかないと思います。

[yuukihayashi]

ご回答ありがとうございます。
Fiddlerを調べてみます。デバッグの勉強も進めていこうと思います。

[退会済みユーザー]

是非そうされることをお勧めします。デバッガが使えていれば、ステップ実行して、即、問題が表題の「null判定」ではないということが分かって、ここで聞かなくても、5 分ぐらいで自己解決できたと思います。

Answer 3

ほんとにnullを返してくれているのでしょうか？
たんにundefinedでは？

Comments

[yuukihayashi]

回答ありがとうございます。一見すると質問内容にも追加しました通り、nullのようでした。

Answer 4

requestUrl に入っているURLをブラウザで直に実行してみると分かることもあるのでは。
console.log(data)されたのでしたらその結果も開示可能な限りされたほうが具体的なアドバイスを得られると思います（たぶん後ろに;入れないとエラーになりそうですけど。）

Comments

[yuukihayashi]

ありがとうございます。
https://api.openbd.jp/v1/get?isbn=1241の様に適当な数字を入れ実行したところ、
ブラウザ上には[null]と表示されました。
また、chromeでの検証での結果も記載します。
[null]
0: null
length: 1
__proto__: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
arguments: (...)
caller: (...)
length: 1
name: "reduceRight"
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__: Object

[m.ts10806]

質問に追記していただければと。こちらに書かれても他の回答者の目にはつきにくいですし、関連性も見えづらくなります。

[m.ts10806]

data自体nullなのではないでしょうか。
URLを直でブラウザに入れて実行されたほうがconsole.log()で見るよりもデータ実態が分かると思います。

[yuukihayashi]

ご回答ありがとうございます。
質問に追加致しました。
URLで直に実行致しました所、[null]とだけブラウザ上に表示されている状態です。

[m.ts10806]

であれば[0]自体存在しないのでdata == nullですね。
dataがnullでなく、且つ、lengthが０より大きい　という条件で試しては？

[yuukihayashi]

ご回答ありがとうございます。
以下のようにif文を変更し、試してみましたがやはり表示されませんでした。
「data != null || data.length > 0」
また、気になるエラーを発見したため、質問の「発生している問題・エラーメッセージ」に
追加致しました。

[m.ts10806]

まあnull返ってきてるなら表示されないのは当然と言えば当然ですが…

[m.ts10806]

「且つ」なので||じゃなくて&&にしないとですね

[yuukihayashi]

ご回答ありがとうございます。
正常にデータが取得できている場合もlength: 1と表示されておりましたため、
data != null && data.length > 0　とすると正常に取得できている場合でもelseが実行されてしまいました。
結果的には、Lhankor_Mhy様のご回答で解決することができました。

[m.ts10806]

解決されたようで何よりです。

[yuukihayashi]

ご回答していただき、本当にありがとうございました。さらに勉強に励みます。

Answer 5

if文の中の前で「var image = buildHtml(data);」と変数を定義し、dataを参照していたため、正しく条件分岐できておりませんでした。if文に変数を定義することで解決することができました。

修正後jsファイル

$(document).on('turbolinks:load', function() {
    function buildHtml(book) {
        var image = '<img "width="150" height="150" + src="' + book[0].summary.cover + '">';
        return image;
    }
    var formResult = $('#new_review');
    $('#submit').on("click",function(e) {
        e.preventDefault();
        var bookName = $('#get-book').find('#isbn').prop('value');
        var requestUrl = 'https://api.openbd.jp/v1/get?isbn=';
        requestUrl += bookName + '&pretty';
        $.ajax({
            type:"GET",
            url:requestUrl,
            dataType:"json"
        })
            .done(function(data) {
                console.log(data);
                if (data[0] != null ){
                    var image = buildHtml(data);
                    $('#book-name').val(data[0].summary.title);
                    $('#author-name').val(data[0].summary.author);
                    $('#image_url').val(data[0].summary.cover);
                    $('.book_image').append(image);
                    formResult.css('display', 'block');
                }
                else {
                    $('.result').append("<p>can't get information</p>")
                }
            })
            .fail(function() {
                alert('情報の取得に失敗しました');
            });
    });
});