调用API获取数据时出现TypeError: completedata.map is not a function求助

问题场景 #

尝试从指定API获取数据时控制台抛出错误，但使用相同代码调用另一个API却能正常运行，核心疑问是两个API的差异在哪里。

原代码 #

<script>
    
fetch('https://js.cexplorer.io/api-static/basic/global.json').then((data)=>{
    return data.json();
}).then ((completedata)=>{
    
    let data1="";
    completedata.map((values)=>{
        data1=`
        <div class="output">
          <h3>Epoch</h3>
          <p>${values.epochNo}</p>
        </div>`
    });
    document.getElementById("live1").innerHTML=data1;
}).catch((err)=>{
    console.log(err);
})
</script>

控制台错误 #

TypeError: completedata.map is not a function

核心原因与API差异 #

两个API返回的数据结构完全不同：

• coinlore API返回数组类型：即使仅包含一条数据，它的返回结果也是一个数组（格式类似[{id:257, ...}]），而map()是数组的原生方法，所以你的代码可以正常遍历。
• cexplorer API返回单个对象：它的返回结果是一个独立的对象（格式类似{epochNo: 420, ...}），对象没有map()方法，直接调用就会抛出类型错误。

修正后的代码 #

不需要用map()遍历，直接访问对象属性即可：

<script>
    
fetch('https://js.cexplorer.io/api-static/basic/global.json').then((data)=>{
    return data.json();
}).then ((completedata)=>{
    let data1 = `
    <div class="output">
      <h3>Epoch</h3>
      <p>${completedata.epochNo}</p>
    </div>`;
    document.getElementById("live1").innerHTML=data1;
}).catch((err)=>{
    console.log(err);
})
</script>

内容的提问来源于stack exchange，提问作者Gianfranco Tamberini