Получить данные из файла json и отобразить значение с помощью jquery / ajax

Question

Следующая функция должна отображать предупреждающее сообщение со значением, полученным из файла JSON.

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);
}

Файл json выглядит следующим образом.

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

Код isnне работаетВ нем отображается пустое окно с предупреждением, поэтому часть AJAX неверна.

Answer 1

В вашем текущем коде есть несколько ошибок:

1. dataType должно быть json вместо jsonp.
2. Нет необходимости повторно анализировать ответ об успешном выполнении (json), поскольку jQuery ajax обрабатывает его для вас, все, что вам нужно сделать, это просто перебрать его.

Итак, ваш текущийкод будет следующим

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>

Answer 2

Это вызов асинхронной функции, вам нужно включить оповещение в вашей функции успеха ajax

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);
        }
    })
}

Или лучший подход был бы как ниже.

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

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

Или даже использоватьобратные вызовы выглядят следующим образом:

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

Обновлено

Нет необходимости анализировать возвращаемый JSON вообще.

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();

Приведенный выше код должен работать, так как сам возврат JSONэто json и больше не нужно разбирать его на json.