如何从多个URL获取JSON数据

时间:2018-04-12 06:15:08

标签: javascript json web-services getjson

我需要从两个URL获取数据并将它们提取到一个表中。我怎样才能做到这一点?任何人都可以帮我怎么做?提前谢谢。

我试过的是这里。但它没有显示任何内容。

var url1 = 'http://localhost:8080/WebService/rest/payment/get/payment';
var url2 = 'http://localhost:8080/WebService/rest/orderdetails/get/all';
$(document).ready(function() {
  $.when(
    $.getJSON(url1),
    $.getJSON(url2)).done(function(result1, result2) {
    var table = $("#oTable");
    $.each(result1, result2, function(i, value) {
      table.append('<tr><td>1</td><td class="txt-oflo">' + value.payment + '</td><td>' + value.username + '</td><td class="txt-oflo">' + value.date + '</td><td><span class="text-success">' + value.price + '</span></td><td><a href=""><button class="btn btn-success">Place</button></a>  <a href=""><button class="btn btn-danger">Cancel</button></a></td></tr>');
    });
  });
});

2 个答案:

答案 0 :(得分:1)

您可以使用fetch的更现代版本的请求,并使用本地支持的Promise.allawait

const url1 = 'http://localhost:8080/WebService/rest/payment/get/payment';
const url2 = 'http://localhost:8080/WebService/rest/orderdetails/get/all';
const fetchJSON = url => fetch(url).then(response => response.json())
$(document).ready(async () => {
  const [result1, result2] = await Promise.all(fetchJSON(url1), fetchJSON(url2));
  const results = [...result1, ...result2];
  const table = $("#oTable");
  results.forEach((value) => (
      table.append('<tr><td>1</td><td class="txt-oflo">' + value.payment + '</td><td>' + value.username + '</td><td class="txt-oflo">' + value.date + '</td><td><span class="text-success">' + value.price + '</span></td><td><a href=""><button class="btn btn-success">Place</button></a>  <a href=""><button class="btn btn-danger">Cancel</button></a></td></tr>')
  ));
});

答案 1 :(得分:1)

deferred.done() - 添加要在解析Deferred对象时调用的处理程序。

你没有看到回应可能是因为其中一个承诺被拒绝了。尝试使用deferred.then()

或者分别循环result1和result2

$.each(result1, function(i, value) {
  table.append('<tr><td>1</td><td class="txt-oflo">' + value.payment + '</td><td>' + value.username + '</td><td class="txt-oflo">' + value.date + '</td><td><span class="text-success">' + value.price + '</span></td><td><a href=""><button class="btn btn-success">Place</button></a>  <a href=""><button class="btn btn-danger">Cancel</button></a></td></tr>');
});