目次
発生したエラー
Laravel8で開発している際、Ajaxでcontroller.phpから受け取ったJSONを加工しようとJSON.parse()を使用したら、タイトルの通り「Uncaught SyntaxError: Unexpected token o in JSON at position 1」というエラーが返ってきました。
JSの記述は以下の通りです。
※jQueryは読み込み済みです。
jQuery.ajax({
headers: {
"X-CSRF-TOKEN": jQuery('meta[name="csrf-token"]').attr("content")
},
url: "/quotation/ajax",
type: "POST",
dataType: "json",
})
.done((res) => {
console.log(res);
/* ==================================== */
// ↓のJSON.parse()で何やらエラーが起きてるらしい
/* ==================================== */
let decoded_json = JSON.parse(res);
console.log(decoded_json);
// データを加工する処理 ここから
・
・
・
// データを加工する処理 ここまで
})
// Ajaxリクエスト失敗時の処理
.fail(function (XMLHttpRequest, textStatus, errorThrown) {
// alert("Ajaxリクエスト失敗");
console.log("Ajaxリクエスト失敗")
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
});ちなみにJSON.parse()とは、
文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。任意の reviver 関数で、生成されたオブジェクトが返される前に変換を実行することができます。
mdn web docs（JSON.parse()）
つまり、JSONを加工しやすい形に戻してくれる便利なメソッドということです。
原因はJSONの記述内容にあった
いろいろネットで調べていると、どうやらkeyをダブルクォーテーションで囲むことで正常に処理されるという内容を見つけました。
試しに以下のようなJSONを手書きで用意し、JSON.parse()をしてみると、同じ「Uncaught SyntaxError: Unexpected token o in JSON at position 1」というエラーが返ってきました。
const json = '{ key1 : 100, key2 : "甘党", key3 : "チョコレートパフェ" }';
const obj = JSON.parse(json);では次に、keyをダブルクォーテーションで囲むとどうなるか……
const json = '{ "key1" : 100, "key2" : "甘党", "key3" : "チョコレートパフェ" }';
const obj = JSON.parse(json);無事、正常に処理されました！
対処法
では、Ajaxで受け取ったJSONのkeyにどうやってダブルクォーテーションを加えるかですが、一度JSON.stringify()で受け取ったJSONを文字列化し、改めてJSON.parse()で変換します。
const json = '{ key1 : 100, key2 : "甘党", key3 : "チョコレートパフェ" }';
const obj = JSON.parse(JSON.stringify(json));これで無事、受け取ったJSONを加工できます。
コメント