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.

Please provide the error message that is occurring. Does it indicate the line where the problem is occurring? — BrightIntelDusk, Oct 02 '14 at 16:08
See http://stackoverflow.com/a/26146066/218196. Same problem. — Felix Kling, Oct 02 '14 at 16:13
@integrityfirst @LightnessRacesinOrbit This is the error is I use jsonp `Uncaught SyntaxError: Unexpected token :` if I dont see below. — davejan, Oct 02 '14 at 16:23

score 6 · Accepted Answer · answered Oct 02 '14 at 16:06

6

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

answered Oct 02 '14 at 16:06

Quentin

914,110
126
1,211
1,335

if I dont use dataType: 'jsonp' I get this error: `XMLHttpRequest cannot load http://*****.com/TestFiles/json/banks.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.` – davejan Oct 02 '14 at 16:08
1

@davejan: That means the server does not support CORS and you can't make an AJAX call to it. JSONP is not a magic bullet, neither is CORS. Both have to be supported by the server. If it doesn't, then they don't want you to access it with client side JavaScript. See this answer I just gave yesterday: http://stackoverflow.com/a/26146066/218196 – Felix Kling Oct 02 '14 at 16:10
1

Very good catch I found a question that explains JSONP in more detail. http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about – BrightIntelDusk Oct 02 '14 at 16:11
@davejan — So configure the server to send a suitable `Access-Control-Allow-Origin` header or use some other means to circumvent the same origin policy. JSONP is one such means, but you have to use it at **both** ends of the connection. – Quentin Oct 02 '14 at 16:11

JS/JSON Uncaught SyntaxError: Unexpected token :

1 Answers1