JS/JSON Uncaught SyntaxError: Unexpected token :

Question

Could someone help me with this:

I am getting an unexpected token error, I have validated my json file and the JS. But I still get an error.

HTML

<div class="load"></div>

Here is the JS

/* Table load */    
var uri = 'http://*****.com/TestFiles/';
$.ajax({        
    url: uri + 'json/banks.json',
    dataType: 'jsonp',
    success: function(data){
        var account = data;
        console.log(data);  
        $.each(account, function(Key, Val) {
            var row=$('<div class="row"></div>');
            console.log(account);
            $.each(Val, function(k, v){
                console.log(account);
                $('<div class="cell"><p>' + v + '</p></div>').appendTo(row);
            });
            row.appendTo('.load');

        });     
    }
});

This is the json file

{
    "count": 5,
    "records": [
        {
            "name": "Big Guy",
            "apy": "0.75",
            "earnings": "376.41"
        },
        {
            "name": "URGrant",
            "apy": "0.87",
            "earnings": "436.89"
        },
        {
            "name": "CheatandGrace",
            "apy": "0.01",
            "earnings": "5.00"
        },
        {
            "name": "The Onion",
            "apy": "0.01",
            "earnings": "5.00"
        },
        {
            "name": "Pellet Grant",
            "apy": "0.01",
            "earnings": "5.00"
        }
    ]
}

Any help could be great.

Answer 1

You are trying to load JSON:

url: uri + 'json/banks.json',

But are telling jQuery to parse it as JSONP:

dataType: 'jsonp',

JSONP is not JSON. You need to specify 'json' or change the server to respond with JSONP.

---

JSON :

Content-type: application/json

{ "foo" : "bar" }

JSONP :

Content-type: application/javascript

dynamically_generated_callback_name({ "foo" : "bar" });

(Beware the Rosetta Flash exploit when supplying JSONP).