我打算从两个不同的API（JSON格式）中检索数据，解析然后在网页上显示每个Feed的部分内容。
我的Javascript和HTML代码如下所示。结果：只有第二个API的数据显示在网页上，而不是第一个。
如何在网页上同时输出两个API的数据？谢谢！
我的JavaScript代码（apicall.js）：
var apiurl = "api.json"
var apiurl1 = "api1.json"
// CALL THE FIRST API
function setup() {
loadJSON(apiurl, gotData);
}
var output = '';
function gotData(data) {
var daten = data.datatable.data[0]
var spalten = data.datatable.columns
for (var i=0; i < spalten.length; i++) {
output += '<p>' + spalten[i].name + ': ' + daten[i] + '</p>';
document.getElementById('root').innerHTML = output + '</br>';
}
}
// CALL THE SECOND API
function setup() {
loadJSON(apiurl1, gotData1);
}
var output1 = '';
function gotData1(data) {
var daten = data.datatable.data[0]
var spalten = data.datatable.columns
for (var i=0; i < spalten.length; i++) {
output1 += '<p>' + spalten[i].name + ': ' + daten[i] + '</p>';
document.getElementById('root').innerHTML = output1;
}
}我的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>API Call</title>
<link href="apicall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/addons/p5.dom.min.js"></script>
<script src="apicall.js"></script>
</body>
</html>如果你增加output而不是仅仅在第二次调用中设置它会怎么样？这样，我认为你可以在同一个setup函数中调用两个API：
var apiurls = [
'api.json',
'api1.json'
],
elroot = document.getElementById('root'),
index = 0;
function setup() {
loadJSON(apiurls[index], gotData);
}
function gotData(data) {
var daten = data.datatable.data[0],
spalten = data.datatable.columns,
output = '';
for (var i = 0; i < spalten.length; i++) {
output = '<p>' + spalten[i].name + ': ' + daten[i] + '</p>';
elroot.innerHTML += '<br>' + output;
}
if (++index < apiurls.length) {
setup();
}
}
编辑：
我刚刚实现了一个用于调用n API URL的循环。由于函数loadJSON是异步的，回调gotData最终将再次调用setup，直到所有apiurls都通过。
const apis = [ "api.json", "api1.json" ]
const elroot = document.getElementById("root")
const load = (api) =>
fetch(api)
.then(r => r.json())
.then(j => [ j.datatable.data[0], j.datatable.columns ])
const concatData = (data) =>
data.reduce((a, d) => [[...a[0], ...d[0]], [...a[1], ...d[1]]], [[], []])
const outputTo = (element) => (data) => {
element.innerHTML = data.map([ daten, { name }] =>`<p>${name} : ${daten}</p>`).join("")
}
Promise.all(apis.map(load)).then(concatData).then(outputTo(elroot))