別のAPI呼び出し内でAPI呼び出しを行いますか？

Question

私は基本的に2つの異なるAPI呼び出しのデータを結合する必要があります。ここに私が今持っているものがあります：

var url= "https://website.com/api.json"; 
    $.ajax({ 
     url: url, 
     type: "GET", 
     dataType: 'json', 
     headers: {'X-API-Key': 'xxxxxx'}, 
     success: function(data){ 

      var api = data.results[0].api; 

      for (var i=0;i<api.length;++i) 
      var api2url = api[i].api2url; 

      { 
       $('tbody').append('<tr><td>'+api[i].thing+'</td></tr>'); 
      } 
     } 
    }); 

問題は私もhttps://website.com/api2.json（これはapi1呼び出しのデータに由来する）のデータが必要なことです。

$('tbody').append('<tr><td><a href="'+api2[i].thing+'">+api[i].thing+'</a></td></tr>');

Answer 1

前方に最も簡単な方法は、あなたの最初のAPI呼び出しの成功コールバックでそのAPI呼び出しを行うために、次のようになります。私が見えるように、私の最終的なコードが必要です。あなたが最初の成功の上に二AJAX呼び出しを行うことができます

var url= "https://website.com/api.json"; 
$.ajax({ 
    url: url, 
    type: "GET", 
    dataType: 'json', 
    headers: {'X-API-Key': 'xxxxxx'}, 
    success: function(data){ 
     // now you have closure over results from api call one 
     $.ajax({ 
     url: 'apiURL2', // or something 
     type: "GET", 
     dataType: 'json', 
     headers: {'X-API-Key': data.results.apiKey // or something }, 
     success: function(moreData){ 

     var api = data.results[0].api; 

     for (var i=0;i<api.length;++i) 
     { 
      $('tbody').append('<tr><td>'+api[i].thing+ moreData.thing'</td></tr>'); 
     } 
    } 
    }) 
}); 

Answer 2

const getDataFromApi = (endpoint) => { 
    return new Promise((resolve, reject) => { 
     $.ajax({ 
      url: url, 
      type: "GET", 
      dataType: 'json', 
      headers: {'X-API-Key': 'xxxxxx'}, 
      success: (data) => { 
       return resolve(data); 
      } 
     }); 
    }); 
}; 

Promise.all([ 
    return getDataFromApi('https://website.com/api.json'); 
]).then((data) => { 
    return Promise.all([ 
     data, 
     getDataFromApi('https://website.com/api2.json') 
    ]); 
    // here your business logic (for loop in your code) 
}).then((data) => { // with bluebird it's easier use spread 
    const dataApi1 = data[0]; 
    const dataApi2 = data[1]; 
}) 
.catch((err) => { 
    console.error(err); 
}); 

Answer 3

：次のようになります。その後、必要に応じてDOMアップデートを実行します。しかし、アイデアは、最初のAjaxコールが完了し成功した後に2回目のajaxコールを実行することです。

function callApi2(aip1) { 
    $.ajax({ 
     //params for the call 
     url: api1.api2url, 
     success: function(data) { 
      var api2 = data.results[0].api; // or whatever the property is 
      $('tbody').append('<tr><td><a href="'+api2[i].thing+'">'+api1.thing+'</a></td></tr>'); 

     }, 
    }); 
} 

var url= "https://website.com/api.json"; 
$.ajax({ 
    url: url, 
    type: "GET", 
    dataType: 'json', 
    headers: {'X-API-Key': 'xxxxxx'}, 
    success: function(data){ 
     var api1 = data.results[0].api; 
     for (var i=0; i<api1.length;++i){ 
      callApi2(api1[i]); 
     } 
    } 
});