JavaScript Два Вложенных Ajax-запроса в jQuery

Question

У меня проблема с моим кодом. Я хочу создать рейтинг криптовалют на моем сайте. Я использовал API с одной стороны, чтобы получить логотип, символ, индекс, цену и т. Д. Криптовалюта. Теперь у меня есть проблема, потому что этот API не предоставляет достаточно информации. Я хотел бы использовать второй API для получения информации о других значениях. Но вот проблема, как я могу сделать это в AJAX-запросах? Я использовал цикл foreach для отображения значений crypto.

var getCurrencyList = function() {
  $.ajax({
    url: 'https://chasing-coins.com/api/v1/top-coins/200',
    dataType: 'json',
    type: 'get',

  }).done(function(res) {

      //here I want use second api call
      $.ajax({
        url: 'https://pro.coinmarketcap.com/api/v1', //Simple link, because you need api key
        dataType: 'json',
        type: 'get',

      }).done(function(res) {
          var data;
          Get res.data
        }
      })

    var dataArray = []; dataArray = Array.from(Object.keys(res), k => res[k]);

    dataArray.forEach((item, index) => {

      var row = document.createElement('tr');

      row.className = 'row-coin';

      row.innerHTML = `
                <th scope='row'>${index}</th>
                <td class='logoNameCoin'><img width='25px ' src='https://chasing-coins.com/api/v1/std/logo/${item.symbol}'/> <p>${item.symbol}</p></td>
                <td><p>$ ${numberRound(item.cap)} </p></td>
                <td><p>$ ${parseFloat(Math.round(item.price * 100) / 100).toFixed(2)}</p></td>
                <td><p>${item.change.hour > 0 ? '<span style="color: green;">' + "+" + item.change.hour + '</span>' : '<span style="color: red;">' + item.change.hour}</span></p></td>
                <td><p>${item.change.day > 0 ? '<span style="color: green;">' + "+" + item.change.day + '</span>' : '<span style="color: red;">' + item.change.day}</span> </p></td>
    <td> // I Need to put data from second request here</td>

      document.querySelector('.loading').style.display = 'none';
      document.querySelector('.table-content').appendChild(row);


    });

  });

}

Answer 1

вы должны обработать в "готовой функции"

var getCurrencyList = function(){
$.ajax({
url: 'https://chasing-coins.com/api/v1/top-coins/200',
dataType: 'json',
type: 'get',

}).done(function(res){


//here I want use second api call
$.ajax({
url: 'https://pro.coinmarketcap.com/api/v1', //Simple link, because you need api key
dataType: 'json',
type: 'get',

}).done(function(res){

var dataArray = [];
dataArray = Array.from(Object.keys(res), k=>res[k]);

dataArray.forEach((item,index) =>{

    var row = document.createElement('tr');



    row.className = 'row-coin';

    row.innerHTML = `
        <th scope='row'>${index}</th>
        <td class='logoNameCoin'><img width='25px ' src='https://chasing- 
    coins.com/api/v1/std/logo/${item.symbol}'/> <p>${item.symbol}</p></td>
        <td><p>$ ${numberRound(item.cap)} </p></td>
        <td><p>$ ${parseFloat(Math.round(item.price * 100) / 100).toFixed(2)}</p> 
    </td>
        <td><p>${item.change.hour > 0 ? '<span style="color: green;">' + "+" + 
   item.change.hour + '</span>' : '<span style="color: red;">' + item.change.hour} 
    </span></p></td>
        <td><p>${item.change.day > 0 ? '<span style="color: green;">' + "+" + 
     item.change.day + '</span>' : '<span style="color: red;">' + item.change.day} 
    </span> </p></td>
       <td> // I Need to put data from second request here</td>

    `

        document.querySelector('.loading').style.display = 'none';
        document.querySelector('.table-content').appendChild(row);


});

});
}
})