JavaScript FetchでのJSON.parseエラーで悩んだ
2021/02/07 Sun.
JavascriptのfetchでPHPと非同期通信処理を行う仕組みを作ってました。
この仕組み自体は今までも経験あるのですが、今回はどういうわけか、
JSON.parse: unexpected character at line 1 column 1 of the JSON data
というJavascriptのエラーが発生してその原因を探るのに無駄な時間を割いてしまいましたので備忘録。
結論を申しますと、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
というエラーが出たときは必ず余計な文字が書き出されているので、それを確認しましょう。
この仕組み自体は今までも経験あるのですが、今回はどういうわけか、
JSON.parse: unexpected character at line 1 column 1 of the JSON data
というJavascriptのエラーが発生してその原因を探るのに無駄な時間を割いてしまいましたので備忘録。
結論を申しますと、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: PHP JavaScript
この記事へのコメント
コメントの投稿
コメントは全て管理人が内容を確認してから表示されます（非公開コメント除く）。
内容によっては表示されない場合がありますことご了承願います。
内容によっては表示されない場合がありますことご了承願います。
