Извлечение данных из нескольких API

Question

Мне нужно получить данные из нескольких API и отобразить их в таблице.Я придумал:

var req = $.ajax({
  url: "....linkhere",

  dataType: 'jsonp'
});
var req = $.ajax({
  url: "....linkhere1",

  dataType: 'jsonp'
});

req.done(function(data) {
  console.log(data);
  var infoTable = $("<table />");

  var arrayL = data.length;
  var outputString = '';

  for (var i = 0; i < arrayL; i++) {
    var tableRow = $("<tr/>");

    titleString = data[i].title;
    var titleCell = $("<td />", {
      text: titleString
    });
    detailString = data[i].description;
    var detailCell = $("<td/>", {
      text: detailString
    });

    tableRow.append(titleCell).append(detailCell);
    infoTable.append(tableRow);
  }

  $("#display-resources").append(infoTable);
});
});

Хотя, таким образом, я могу получить данные только от одного API.Как я могу взять его из нескольких?

РЕДАКТИРОВАТЬ:

Я пытаюсь добавить текстовый ввод, чтобы я мог отправить запрос на конкретное слово.Я пытаюсь добавить существующую таблицу с новыми результатами.Я пытался изменить код, который был предоставлен в качестве ответа ниже.Тем не менее, я что-то сделал, и это не работает.

$("#inputChoice").on("blur", function() {
    let choice = $(this).val();
    let req = $.ajax({
        url: "...APIlink"+choice,
        dataType: "jsonp"
    });
    req.done(function (data) {
        console.log(data);
        var infoTable = $("<table />");

        let arrayL = data.length;
        for (var i = 0; i < arrayL; i++) {
            var tableRow = $("<tr/>");

            titleString = data[i].title;
            var titleCell = $("<td />", {
                text: titleString
            });
            titleCell.addClass("title-row");


            detailString = data[i].description;
            var detailCell = $("<td/>", {
                text: detailString


            });
            detailCell.addClass("details-row")

            tableRow.append(titleCell).append(detailCell);
            infoTable.append(tableRow);
        }
        $("#display-resources").append(infoTable);
});
});

Answer 1

Запрос данных от конечных точек, и когда они все будут завершены, создайте таблицу

function multiReq(...links) {
  let responseCount = links.length;
  const responses = [];
  let handler;
  function responseHandler(i) {
    return data => {
      responseCount -= 1;
      responseCount === 0
        ? handler([].concat(...responses))
        : (responses[i] = data)
    }
  }
  links.forEach((link, i) => $.ajax({
    url: link,
    dataType: 'jsonp'
  }).done(responseHandler(i)));
  return {
    done(callback) {
      handler = callback;
    }
  };
}


multiReq(link1, link2).done((data) => {})

или

function multiReq(...links) {
  return Promise.all(links.map(link => $.ajax({
    url: link,
    dataType: 'jsonp'
  }))).then((...responses) => [].concat(...responses))
}


multiReq(link1, link2).then(data => {
    // create table
})

или

function multiReq(...links) {
  return $.when(...links.map(link => $.ajax({
    url: link,
    dataType: 'jsonp'
  }))).then((...responses) => [].concat(...responses.map(([data]) => data)))
}


multiReq(link1, link2).done(data => {
    // create table
})

или как можно ближе к вашему коду:

var req1 = $.ajax({
  url: "https://wt-65edf5a8bfb22e61214c31665c92dbd2-0.sandbox.auth0-extend.com/link-1",

  //dataType: 'jsonp'
});
var req2 = $.ajax({
  url: "https://wt-65edf5a8bfb22e61214c31665c92dbd2-0.sandbox.auth0-extend.com/link-1",

  //dataType: 'jsonp'
});

$.when(req1, req2).done(function([data1], [data2]) {
  var data = data1.concat(data2); // merge data from both request into one
  
  //console.log(data);
  var infoTable = $("<table />");

  var arrayL = data.length;
  var outputString = '';

  for (var i = 0; i < arrayL; i++) {
    var tableRow = $("<tr/>");

    titleString = data[i].title;
    var titleCell = $("<td />", {
      text: titleString
    });
    detailString = data[i].description;
    var detailCell = $("<td/>", {
      text: detailString
    });

    tableRow.append(titleCell).append(detailCell);
    infoTable.append(tableRow);
  }

  $("#display-resources").append(infoTable);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display-resources"></div>