在另一个API调用中进行API调用?

时间:2017-12-06 22:12:25

标签: javascript jquery

我基本上需要组合来自两个不同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>');

3 个答案:

答案 0 :(得分:0)

最简单的方法是在第一次API调用的成功回调中进行API调用。可能看起来像:

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

答案 1 :(得分:0)

let canvas = document.getElementById("cnvs");
ctx = canvas.getContext("2d");

canvas.width=500;
canvas.height=500;

ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

let step = canvas.width / 15;


let snake = new Snake(1);
console.log(snake);
setInterval(snake.update(),1000);
setInterval(snake.draw(),1000);




    function Snake(dir) {
    this.x = 300;
    this.y = 300;
    this.dir = dir;
    this.step=step;
    this.update = function () {
        if (this.dir === 1) {
            console.log(this.y);
            this.y-=this.step;
            console.log(this.y);
        }
        else if (this.dir === 2) {
            this.x+=this.step;
        }
        else if (this.dir === 3) {
            this.y+=this.step;
        }
        else if (this.dir === 4) {
            this.x-=this.step;
        }
   }

    this.draw = function () {
        ctx.fillStyle = "red";
        ctx.fillRect(this.x,this.y,step,step);
    }
   }

答案 2 :(得分:0)

你可以在第一次成功时进行第二次ajax调用。然后根据需要执行DOM更新。但是想法是在第一次完成后运行第二次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]);
        }
    }
});