JSON:Received response but unable to display it out in jQuery

Question

I am new to JSON and web developing stuffs. So pardon me if I unable to present the problem in proper terms.

Here's the situation where I received JSON response from the site, however unable to display the response data with an error prompted out in the console.

I tried in firefox and chrome. Both of them gave me different errors.

Firefox = "SyntaxError: missing ; before statement

Chrome = "Uncaught SyntaxError: Unexpected token :"

I already tried two types of calling through jQuery API. Below are my sample code.

<html>
<body>
    <button>Click Me!</button>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $("button").click(function()
        {
            $.getJSON("http://rate-exchange.herokuapp.com/fetchRate?from=SGD&to=MYR&lang=en-us&format=json&jsoncallback=?", function(data) {
                    console.log(data);
                    var info = JSON.parse(data);
                    alert(rate);
                });     
        })
    </script>
</body></html>



    <html>
<body>
    <button>Click Me!</button>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $("button").click(function loadRate()
        {
            $.ajax({
                type:'GET',
                url:"http://rate-exchange.herokuapp.com/fetchRate",
                data:"from=SGD&to=MYR"+"&lang=en-us&format=json&jsoncallback=?",
                dataType:'json',
                success:function(resp){
                    var parse = JSON.parse(resp);
                    alert(parse.Rate);
                }
            });
        })
    </script>
</body></html>

And the JSON API i refer to is : http://rate-exchange.herokuapp.com/

The response data is like this : {"To":"MYR","From":"SGD","Rate":"2.5666"}

score 2 · Answer 1 · answered Oct 01 '14 at 16:17

2

1) var info = JSON.parse(data); no need in this line

2) alert(rate); what is rate?

3) .click(function loadRate() function here should not have any name, just .click(function()

4) var parse = JSON.parse(resp); no need, jquery automatically parses json when you tell that dataType:'json'

answered Oct 01 '14 at 16:17

Cheery

16,063
42
57

3) Why not? There is nothing wrong with named function expressions. While all of the things you listed might be correct, none of them address the real issue, which is loading JSON when JSONP is expected. – Felix Kling Oct 01 '14 at 16:24
@FelixKling Look at API, it returns JSON, not a JSONP. The part related to `jsoncallback` is from somewhere else. – Cheery Oct 01 '14 at 16:27
I know that it returns JSON. That's the reason for the error message the OP is getting. jQuery expects JSONP, not JSON. – Felix Kling Oct 01 '14 at 16:28
@FelixKling yes, I see it. Did not check the domain, thought he is working with his own site ) – Cheery Oct 01 '14 at 16:33

score 1 · Answer 2 · edited May 23 '17 at 12:05

At least in the first case, you are indirectly tell jQuery to expect JSONP:

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

JSONP is nothing else but adding a <script> element dynamically and evaluating some JavaScript (it actually has nothing to do with JSON). However, it must be supported by the server, since the server has to return a JavaScript function call, not just plain JSON.

As you can see with the response, it's JSON, and not a function call. If you put it directly into the console (to evaluate it as JS) you will get the same (or similar) errors:

> {"To":"MYR","From":"SGD","Rate":"2.5666"}
SyntaxError: Unexpected token :

If you remove the jsoncallback=? part, you get a different error:

XMLHttpRequest cannot load http://rate-exchange.herokuapp.com/fetchRate?from=SGD&to=MYR&lang=en-us&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access.

The API just doesn't seem to support JSONP or CORS, so you can't make an Ajax request to the service directly. You have to find a different way to access the access e.g. via your own or a public proxy (example: https://github.com/Rob--W/cors-anywhere)

See also: Ways to circumvent the same-origin policy

Of course as an alternative you could ask the developers of this service to enable CORS. — Felix Kling, Oct 01 '14 at 22:36

score 0 · Answer 3 · answered Oct 01 '14 at 17:32

For one, @Felix Kling's response about using JSONP callback is true, so remove that.

Second, you're using a very old version of jQuery, I suggest you upgrade to 1.11.1.

Here is a functioning example:

<html>
    <body>
        <button>Click Me!</button>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function() {
                $("button").click(function() {
                    var url = "http://rate-exchange.herokuapp.com/fetchRate?from=SGD&to=MYR&lang=en-us&format=json";
                    $.getJSON(url)
                        .done(function (result) {
                            console.log('Success: ', result);
                        })
                        .fail(function () {
                            console.log('Fail');
                        });
                });
            });
        </script>
    </body>
</html>

As I also mentioned in my answer, this API does not have CORS enabled, so you can't make an Ajax request to it. See: http://jsfiddle.net/vnmmurqc/ — Felix Kling, Oct 01 '14 at 22:34
You're right. I didn't see the CORS issue at first because I was testing from a local file which is not subject to cross-domain security in JavaScript. — Uptown Apps, Oct 01 '14 at 23:26

JSON:Received response but unable to display it out in jQuery

3 Answers3

Linked