Javascript获取API未在多张卡上显示结果

我有一个脚本，它从一个链接中获取数据，然后将其插入表中并向用户显示。剧本写得很好。但后来我决定让函数更具动态性，所以我在数据显示的位置添加了两个参数name和Html div name。当我第一次调用该函数时，它工作得很好，但在第二次调用时它没有显示任何数据。我在我的项目中使用PHP，对javascript还不熟悉。但是我在PHP中做了一个类似的函数，但是效果很好。有什么建议吗

函数getInfoByCountry（名称、显示名称）{ 取回（“https://something.com/countries/“+姓名） .then（res=>res.json（）） 。然后（数据=>{ 输出=` 个案总数 ${data.cases} 今天的案例 ${data.todayCases} 死亡 ${data.death} 恢复 ${data.recovered} 批评的 ${data.critical} 活动案例 ${data.active} `; document.getElementById（displayName）.innerHTML=输出； }); } getInfoByCountry（“美国”、“美国资讯”）； getInfoByCountry（“中国”、“中国信息”）

---

像这样添加

返回

 function getInfoByCountry(name, displayName) {
  var display = document.getElementById(displayName);
  return fetch("https://smthing.com/countries/"+name)
    .then(res => res.json())
    .then(data => {

      output = `
  <tr>
    <td>Total Cases</td>
    <td>${data.cases}</td>
  </tr>
  <tr>
    <td>Today Cases</td>
    <td>${data.todayCases}</td>
  </tr>
  <tr>
    <td>Deaths</td>
    <td>${data.deaths}</td>
  </tr>
  <tr>
    <td>Recovered</td>
    <td>${data.recovered}</td>
  </tr>        
  <tr>
    <td>Critical</td>
    <td>${data.critical}</td>
  </tr>
  <tr>
    <td>Active Cases</td>
    <td>${data.active}</td>
  </tr>                        
`;

  document.getElementById(displayName).innerHTML += output;

    }

    );
}


  getInfoByCountry("USA", "display");

  getInfoByCountry("China", "display");

函数getInfoByCountry（名称、显示名称）{
var display=document.getElementById（displayName）；
返回取回（“https://smthing.com/countries/“+姓名）
.then（res=>res.json（））
。然后（数据=>{
输出=`
个案总数
${data.cases}
今天的案例
${data.todayCases}
死亡
${data.death}
恢复
${data.recovered}
批评的
${data.critical}
活动案例
${data.active}
`;
document.getElementById（displayName）.innerHTML+=输出；
}
);
}
getInfoByCountry（“美国”、“显示”）；
getInfoByCountry（“中国”、“显示”）；

如果要使用

displayName

作为id属性添加结果，则应为注释中提到的

USAinfo

添加另一个结果，或者更好的实现是动态创建表并将结果附加到容器中

函数getInfoByCountry（名称、显示名称）{ 获取（“API_URL”+名称） .then（res=>res.json（）） 。然后（数据=>{ 输出=` 个案总数 ${data.cases} 今天的案例 ${data.todayCases} 死亡 ${data.death} 恢复 ${data.recovered} 批评的 ${data.critical} 活动案例 ${data.active}

---

`; document.getElementById（“容器”）.innerHTML+=输出； }); } getInfoByCountry（“美国”、“美国资讯”）； getInfoByCountry（“中国”、“中国信息”）

表格，td{
边框：1px实心；
}

---

您只需添加

return

语句即可返回输出

是小提琴你可以检查功能

function getInfoByCountry(name,displayName) {
    debugger;
  return fetch("https://jsonplaceholder.typicode.com/posts/"+name)
    .then(res => res.json())
    .then(data => {
      output = `
      <tr>
        <td>Total Cases</td>
        <td>${data.title}</td>
      </tr>
      <tr>
        <td>Today Cases</td>
        <td>${data.body}</td>
      </tr>
    `;
      document.getElementById(displayName).innerHTML = output;
    });
}

函数getInfoByCountry（名称、显示名称）{ 调试器； 返回取回（“https://jsonplaceholder.typicode.com/posts/“+姓名） .then（res=>res.json（）） 。然后（数据=>{ 输出=` 个案总数 ${data.title} 今天的案例 ${data.body} `; document.getElementById（displayName）.innerHTML=输出； }); }

---

对，函数默认不返回任何内容我知道，但我想知道它第一次是如何工作的？在第二次编辑时，它显示的是

[对象承诺]

而不是数据，直到不显示数据才显示

[对象承诺]

知道为什么吗？我可以从我的终端获取api url来测试它吗？我已经在这里更新了答案。这将显示两个国家的数据您不需要第二次

是的，在表格中显示输出问题在这里它可以找到ChinaInfo，但不能找到USAInfo谢谢，但Omolewa首先回答了。你能从答案中删除API URL吗？当然，我会删除它now@lachiweb您还可以根据数据长度创建多张卡。可能是提琴帮了你：）