Error in JSON when I am doing a AJAX call in jQuery

Question

I'm getting the following error in the console when I am trying to return a string of JSON from a AJAX call.

Uncaught SyntaxError: Unexpected token

I have added a codepen with the code I am using.

If you click the convert button and look in the console you will see the error.

I cannot for the life of me figure it out.

Thanks.

JB

http://codepen.io/anon/pen/XJvyWq

jQuery('.convert').click(function(){
    jQuery.get("https://rate-exchange.herokuapp.com/fetchRate?from=EUR&to=CAD&callback=?", function(data){
        console.log("Data: " + data);
    }, 'json')
});

You dont need to add `’json’` at the end of the get request. — darkknight, Apr 15 '15 at 23:26
If I don't I get the following error: XMLHttpRequest cannot load https://rate-exchange.herokuapp.com/fetchRate?from=EUR&to=CAD&callback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://dev.responsive.sportsgirl.com.au' is therefore not allowed access. — johnnyxbell, Apr 15 '15 at 23:28
Here is the codepen link `http://codepen.io/anon/pen/XJvyWq` — darkknight, Apr 15 '15 at 23:30

Bouraoui KACEM · Answer 1 · 2015-04-16T01:29:49.910

2

First remove the "=" .

for a string display in the console you can use the methode stringify of the JSON object

jQuery('.convert').click(function(){


jQuery.get("https://rate-exchange.herokuapp.com/fetchRate?from=EUR&to=CAD&callback", function(data){
         console.log("Data: " +JSON.stringify(data) );
            }, 'json');
        });

or for display an object in the console you can juste write :

jQuery('.convert').click(function(){

jQuery.get("https://rate-exchange.herokuapp.com/fetchRate?from=EUR&to=CAD&callback", function(data){
         console.log(data );
            }, 'json');
        });

the result :

Object {To: "CAD", From: "EUR", Rate: "1.3138"}

edited Apr 16 '15 at 01:29

answered Apr 15 '15 at 23:43

Bouraoui KACEM

821
1
8
20

`console.log("Data: " +data );` would output `Data: [object Object]`. What exactly does removing `?` do? – Felix Kling Apr 16 '15 at 00:04
remove the "=" which generate the error ,i correct it ,sorry for the wrong and for the console.log(data) without "Data" it will generate Object {To: "CAD", From: "EUR", Rate: "1.3138"} – Bouraoui KACEM Apr 16 '15 at 01:28
we can remove also &callback because it unusefull in this case – Bouraoui KACEM Apr 16 '15 at 01:32

score 0 · Answer 2 · edited May 23 '17 at 11:50

Remove the callback=? from the end of the URL you are providing OR remove the 'json' from the .get() method call.

jQuery('.convert').click(function(){
  jQuery.get("https://rate-exchange.herokuapp.com/fetchRate?from=EUR&to=CAD", function(data){
        console.log(data);
  });});

This is because jQuery assumes that when you pass a "callback" parameter in URL and type 'json' that the response will be JSONP. But in this case the server sends a JSON string. Instead of passing "?" if you pass the name of an existing function the error will not be thrown.

The current response by the server is:

{"To":"CAD","From":"EUR","Rate":"1.3138"}

If the Server was responding with JSONP and if the callback you passed was "test" then the response would have been:

test({"To":"CAD","From":"EUR","Rate":"1.3138"})

http://codepen.io/tejzpr/pen/yymQNz?editors=101 explains both cases.

I think it would more helpful if you explained why. – Felix Kling Apr 15 '15 at 23:38 — Felix Kling, Apr 15 '15 at 23:38

score 0 · Answer 3 · answered Apr 15 '15 at 23:41

0

Remove json at the second parameter as @SnehalShah said and it'll work

$('.convert').click(function(){
    $.get("https://rate-exchange.herokuapp.com/fetchRate?from=EUR&to=CAD&callback=?", function(data){
         console.log("Data: " + JSON.stringify(data));  
    });
});

answered Apr 15 '15 at 23:41

Fares M.

1,538
1
17
18

You should explain why mate, not just post code answers. – Darren Apr 15 '15 at 23:41

score 0 · Answer 4 · answered Apr 15 '15 at 23:59

http://jsfiddle.net/1z20m3pL/

Try this way::

jQuery('.convert').click(function(){
    jQuery.get("https://rate-exchange.herokuapp.com/fetchRate?from=EUR&to=CAD&callback=?", function(data){
                    console.log("To: " + data.To);
                    console.log("From: " + data.From);
                    console.log("Rate: " + data.Rate);
                });
            });

Error in JSON when I am doing a AJAX call in jQuery

4 Answers4