「Uncaught SyntaxError：Unexpected token o」が発生し続ける

私はいくつかのhtml / css / javascriptを学習しようとしているので、自分で教育プロジェクトを書いています。

アイデアは、いくつかの語彙をjsonファイルに含め、テーブルにロードすることでした。ファイルを読み込んで、その値の1つを出力することができました。その後、値をテーブルに読み込むコードを記述し始めました。

その後、エラーが発生し始めたので、記述したコードをすべて削除し、1行（以前に機能していたのと同じ行）だけを残しました。エラーはまだ残っています。

エラーは次のとおりです。

Uncaught SyntaxError: Unexpected token o
(anonymous function)script.js:10
jQuery.Callbacks.firejquery-1.7.js:1064
jQuery.Callbacks.self.fireWithjquery-1.7.js:1182
donejquery-1.7.js:7454
jQuery.ajaxTransport.send.callback

私のJavaScriptコードは別のファイルに含まれていて、これは単に次のとおりです。

function loadPageIntoDiv(){
    document.getElementById("wokabWeeks").style.display = "block";
}

function loadWokab(){
    //also tried getJSON which threw the same error
    jQuery.get('wokab.json', function(data) {
        var glacier = JSON.parse(data);
    });
}

そして、私のJSONファイルには次のものが含まれています。

[
    {
        "english": "bag",
        "kana": "kaban",
        "kanji": "K"
    },

    {
        "english": "glasses",
        "kana": "megane",
        "kanji": "M"
    }
]

これで、エラーは行である行11で報告されvar glacier = JSON.parse(data);ます。

jsonファイルを削除すると、「GET http：//.../wokab.json 404（Not Found）」というエラーが表示されるため、それがロードされている（または少なくとも試行している）ことがわかります。

jQueryがデータ型を推測しているようです。getJSON（）を呼び出していなくても、JSON解析を実行します。オブジェクトでJSON.parse（）を呼び出そうとすると、エラーが発生します。

詳細については、Aditya Mittalの回答をご覧ください。

問題は非常に簡単です

jQuery.get('wokab.json', function(data) {
    var glacier = JSON.parse(data);
});

あなたはそれを2回解析しています。getはを使用するdataType='json'ため、データはすでに json形式です。$.ajax({ dataType: 'json' ...返されるデータ型を具体的に設定するために使用してください！

基本的に、応答ヘッダーがtext / htmlの場合は解析する必要があり、応答ヘッダーがapplication / jsonの場合はすでに解析されています。

text / html応答のjquery成功ハンドラーから解析されたデータ：

var parsed = JSON.parse(data);

アプリケーション/ json応答のjquery成功ハンドラーから解析されたデータ：

var parsed = data;

Unexpected tokenエラーの別のヒント。javascriptオブジェクトとjsonの間には2つの大きな違いがあります。

1. jsonデータは常に二重引用符で囲む必要があります。
2. キーは引用符で囲む必要があります

正しいJSON

 {
    "english": "bag",
    "kana": "kaban",
    "kanji": "K"
}

エラーJSON 1

 {
    'english': 'bag',
    'kana': 'kaban',
    'kanji': 'K'
 }

エラーJSON 2

 {
    english: "bag",
    kana: "kaban",
    kanji: "K"
}

リマーク

これはその質問に対する直接の回答ではありません。しかし、それはUnexpected tokenエラーに対する答えです。だから、その質問に困惑している他の人を助けるかもしれません。

単に応答がすでに解析されているため、再度解析する必要はありません。もう一度解析すると、「予期しないトークンo」が返されますが、リクエストでデータ型を指定する必要がありますdataType='json'

ちょうど今、同じような問題がありました。私の解決策が役立つかもしれません。私はiframeを使用してxmlファイルをアップロードしてjsonに変換し、それをバックグラウンドで送り返しています。Chromeは、断続的にしか表示されず、「Uncaught SyntaxError：Unexpected token o」を引き起こすゴミを受信データに追加していました。エラー。

私は次のようにiframeデータにアクセスしていました：

$('#load-file-iframe').contents().text()

これはlocalhostでは問題なく機能しましたが、サーバーにアップロードすると、一部のファイルのみ、および特定の順序でファイルをロードする場合にのみ機能しなくなりました。原因はよくわかりませんが、これで解決しました。上記の行を

$('#load-file-iframe').contents().find('body').text()

HTML応答にごみが残っていることに気づきました。

簡単に言えば、生のHTML応答データを確認してください。

SyntaxError: Unexpected token o in JSON

これawaitは、JSONデータを返すメソッドにキーワードを使用し忘れた場合にも発生します。

例えば：

async function returnJSONData()
{
   return "{\"prop\": 2}";
}

var json_str = returnJSONData();
var json_obj = JSON.parse(json_str);

が見つからないため、エラーがスローされますawait。実際に返されるのは、Promiseではなく[オブジェクト] stringです。

修正するには、想定どおりにawaitを追加します。

var json_str = await returnJSONData();

これはかなり明白なはずですが、エラーはon JSON.parseで呼び出されるため、メソッド呼び出しと呼び出しの間にある程度の距離があると、見落としがちです。awaitJSON.parse

JSONファイルの前後に文字が含まれていないことを確認してください。多分印刷できないものでしょうか？この方法を試してみてください：

[{"english":"bag","kana":"kaban","kanji":"K"},{"english":"glasses","kana":"megane","kanji":"M"}]

const getCircularReplacer = () => {
              const seen = new WeakSet();
              return (key, value) => {
                if (typeof value === "object" && value !== null) {
                  if (seen.has(value)) {
                    return;
                  }
                  seen.add(value);
                }
                return value;
              };
            };
JSON.stringify(tempActivity, getCircularReplacer());

tempActivityが「SyntaxError：JSONの予期しないトークンoの位置1にある予期しないトークンo-スタックオーバーフロー」というエラーを生成するデータを処理している場合