Question

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

Answer 1

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.