Agfdhyk

I'm trying to learn some html/css/javascript, so I'm writing myself a teaching project.

The idea was to have some vocabulary contained in a json file which would then be loaded into a table. I managed to load the file in and print out one of its values, after which I began writing the code to load the values into the table.

After doing that I started getting an error, so I removed all the code I had written, leaving me with only one line (the same line that had worked before) ... only the error is still there.

The error is as follows:

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

My javascript code is contained in a separate file and is simply this:

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);

    });

}

And my JSON file just has the following right now:

[

    {

        "english": "bag",

        "kana": "kaban",

        "kanji": "K"

    },



    {

        "english": "glasses",

        "kana": "megane",

        "kanji": "M"

    }

]

Now the error is reported in line 11 which is the var glacier = JSON.parse(data); line.

When I remove the json file I get the error: "GET http://.../wokab.json 404 (Not Found)" so I know it's loading it (or at least trying to).

Looks like jQuery takes a guess about the datatype. It does the JSON parsing even though you're not calling getJSON()-- then when you try to call JSON.parse() on an object, you're getting the error.

Further explanation can be found in Aditya Mittal's answer.

The problem is very simple

jQuery.get('wokab.json', function(data) {

    var glacier = JSON.parse(data);

});

You're parsing it twice. get uses the dataType='json', so data is already in json format.
Use $.ajax({ dataType: 'json' ... to specifically set the returned data type!

Basically if the response header is text/html you need to parse, and if the response header is application/json it is already parsed for you.

Parsed data from jquery success handler for text/html response:

var parsed = JSON.parse(data);

Parsed data from jquery success handler for application/json response:

var parsed = data;

Another hints for Unexpected token errors.
There are two major differences between javascript objects and json:

1. json data must be always quoted with double quotes.


2. keys must be quoted

Correct JSON

 {

    "english": "bag",

    "kana": "kaban",

    "kanji": "K"

}

Error JSON 1

 {

    'english': 'bag',

    'kana': 'kaban',

    'kanji': 'K'

 }

Error JSON 2

 {

    english: "bag",

    kana: "kaban",

    kanji: "K"

}

Remark

This is not a direct answer for that question. But it's an answer for Unexpected token errors. So it may be help others who stumple upon that question.

Simply the response is already parsed, you don't need to parse it again. if you parse it again it will give you "unexpected token o" however you have to specify datatype in your request to be of type dataType='json'