Question

我打算从两个不同的API（JSON格式）中检索数据，进行解析，然后在网页上显示每个供稿的一部分。

我的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>

Answer 1

如果您增加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都通过为止。

Answer 2

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))

如何使用Javascript进行2个连续的API调用？

2 个答案: