Get data from json file and display the value using jquery/ajax

Question

The following function should display an alert message with the value it gets from the JSON file.

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            let myObject = JSON.parse(json);
            currencyRate += myObject.USD_INR.val;
        }
    })

    alert(currencyRate);
}

The json file looks like the following.

{"USD_INR":{"val":72.037972}}

The code isn't working. It's showing a blank alert box so the ajax portion isn't correct.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — wOxxOm, Dec 14 '18 at 16:54

sadrzadehsina · Accepted Answer · 2018-12-14T17:20:57.600

1

It is a async function call, you need to put alert in your ajax success function

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            let myObject = JSON.parse(json);
            currencyRate += myObject.USD_INR.val;

            // put alert here
            alert(currencyRate);
        }
    })
}

Or a better approach would be like below.

ajaxTest().then(function( json ) {
   let myObject = JSON.parse(json);
   currencyRate += myObject.USD_INR.val;

   // put alert here
   alert(currencyRate);
});

Or even use callbacks as follows:

function ajaxTest( callback ) {
        let currencyRate = "";

        $.ajax({
            url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
            dataType: "jsonp",
            success: function(json) {
                let myObject = JSON.parse(json);
                currencyRate += myObject.USD_INR.val;


                callback(currencyRate);
            }
        })
    }

ajaxTest(function( result ) {
  alert(result)
})

Updated

No need to parse the return json at all.

function ajaxTest() {
    let currencyRate = "";

    $.ajax({
        url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
        dataType: "jsonp",
        success: function(json) {
            // no need to parse it to json anymore
            // let myObject = JSON.parse(json);
            currencyRate += json.USD_INR.val;

            // put alert here
            alert(currencyRate);
        }
    })
}

ajaxTest();

The above code should work, since the return json itself is a json and no need to parse it to json anymore.

edited Dec 14 '18 at 17:20

answered Dec 14 '18 at 16:53

sadrzadehsina

1,331
13
26

still not working for me. no alert box showing up. can I call the function as usual like ajaxTest(); – NoobCoder Dec 14 '18 at 17:05
make sure that your ajax request does not have any error, and return the expected json. Actually make sure that your ajax success callback will run. – sadrzadehsina Dec 14 '18 at 17:09
@NoobCoder Try the updated one, the problem is with trying to parse it to json. – sadrzadehsina Dec 14 '18 at 17:16
still not seeing any alert boxes – NoobCoder Dec 14 '18 at 17:19
Do you call the `ajaxTest` function? – sadrzadehsina Dec 14 '18 at 17:21
I did call it. I'm seeing some errors as follows: https://i.postimg.cc/hjrfwmPz/000668.jpg – NoobCoder Dec 14 '18 at 17:25
@NoobCoder Your problem is not with the code you have posted in your question, it is a chrome extension issue. Please have a look at https://stackoverflow.com/questions/25867584/extension-refuses-to-load-the-script-due-to-content-security-policy-directive – sadrzadehsina Dec 14 '18 at 17:28
Thanks sadrzadehsina. now it's working after I added the content_security_policy – NoobCoder Dec 15 '18 at 05:45

score 0 · Answer 2 · answered Dec 14 '18 at 19:10

There are a few things wrong with your current code

The dataType should be json instead of jsonp.
There's no need to re-parse the success response (json) as jQuery ajax handles it for you all you need to do is to just iterate over it.

So Your current code will be as follows

function ajaxTest() {
  let currencyRate = "";

  $.ajax({
    url: "http://free.currencyconverterapi.com/api/v5/convert?q=USD_INR&compact=y",
    dataType: 'json',
    success: function(json) {
      currencyRate += json.USD_INR.val;
      console.log(currencyRate)
      alert(currencyRate);
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<button onClick="ajaxTest()">Get Rates</button>

Get data from json file and display the value using jquery/ajax

2 Answers2

Updated