脱力系備忘録BloG ホーム » プログラミング »JavaScript FetchでのJSON.parseエラーで悩んだ

JavaScript FetchでのJSON.parseエラーで悩んだ  

JavascriptのfetchでPHPと非同期通信処理を行う仕組みを作ってました。
この仕組み自体は今までも経験あるのですが、今回はどういうわけか、

JSON.parse: unexpected character at line 1 column 1 of the JSON data

というJavascriptのエラーが発生してその原因を探るのに無駄な時間を割いてしまいましたので備忘録。

JSON_parse_error.png

結論を申しますと、PHPがJSONを書き出す前に余計なテキストを書き出していたのが原因です。

もちろん、真っ先にJSONの書き出しが怪しいと思いました。
それでPHPが書き出すJSONデータをメールで送信して中身を確認したのですが、全く問題が見つからず。
過去に作ったプログラムと比較したりして何が違うかバグ探しをしたけどわからず。

で、やけになってJavascriptのコードの

return response.json();

という箇所を

return response.text();

にして受信内容をconsole.log()で表示してみたらJSONデータの前に余計な文言が書き出されてました。

原因は、外部PHPファイルを読み込んでいるのですが、その読み込むPHPファイルがテスト環境用のもので、その中にテスト用のコメントを書き出す部分が入っていたのが原因でした。
このテスト用PHPファイルをAJAX非同期通信システムで利用するのが初めてだったので、そのようなコメント書き出しがあるなんてことに気が付きませんでした。


理由がわかれば「なんだそんなこと?」ということに限ってなかなかバグが見つからないものです。

とりあえず、非同期処理でJSONデータを受け取るときに

JSON.parse: unexpected character at line 1 column 1 of the JSON data

というエラーが出たときは必ず余計な文字が書き出されているので、それを確認しましょう。
プログラミングの関連記事

category: プログラミング

この記事へのコメント

コメントの投稿

非公開コメント

プロフィール

最新記事

最新コメント

アンケートやゲーム参加で無料でマイルが貯まる! すぐ貯まるポイントサイト すぐたま

▲ Pagetop