CODEWITHSUNDEEP
javascriptjqueryajaxjson
lazykoala
lazykoala

Reputation: 1

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

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"}

Upvotes: 0

Views: 386

Answers (3)

Uptown Apps
Uptown Apps

Reputation: 707

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>

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816262

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

Upvotes: 1

Cheery
Cheery

Reputation: 16214

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'

Upvotes: 2

Related Questions