以特定顺序从数组中的 API 获取数据

Posted 2023-05-09

【中文标题】以特定顺序从数组中的 API 获取数据

【英文标题】：Getting data from an API that is in an array in a certain order

【发布时间】：2021-10-05 14:20:44

【问题描述】：

我正在尝试从 API 获取数据，但遇到了问题。数据布局如下：

  "stats": [
    "base_stat": 45,
    "effort": 0,
    "stat": 
      "name": "hp",
      "url": "https://pokeapi.co/api/v2/stat/1/"
    
  ]

我想让“base_stat”数字出现在“stat”名称之后，所以我将看起来像这样： “Hp: 45”（我也想大写）

我遇到的另一个问题是标题贯穿整个名称列表，我希望它与第一个模式的名称相同。

这是我的代码，这是我的代码笔，因为这个项目太大了，无法全部放在这里。

代码笔： https://codepen.io/drxl/pen/WNjJQXa

API： https://pokeapi.co/api/v2/pokemon/?limit=150（原创）

https://pokeapi.co/api/v2/pokemon/1/（统计数据在哪里）

我尝试过的：

   function loadStats(item) 
      let url = item.detailsUrl;
      return fetch(url).then(function (response) 
         return response.json();
      ).then(function (details) 
         //add details to stats
         item.stats = [];
         for (var i = 0; i < details.stats.length; i++) 
            item.stats.push(details.stats[i].stat.name);
         
         item.stats = item.stats.join(': <br>');
         
         item.stats = [];
         for (var a = 0; a < details.stats.base_stath; a++) 
            item.stats.base_stat.push(details.stats[a].base_stat);
         

      ).catch(function (e) 
         console.error(e);
      );
   

【参考方案1】：

你可以通过mapping初始数据得到你想要的数据结构

item.stats = details.stats.map(( base_stat, stat:  name  ) =>
  `$name: $base_stat`).join("<br/>")

【讨论】：

好的，它很接近，但它说“最后未定义，它仍然贯穿所有名称。我希望它是我点击的口袋妖怪的名称

与我回答中的代码无关。你得到undefined 因为你有$("<p>" + item.stats + item.base_stat + "<p>"); 和item.base_stat 没有定义

对，我忘了。我摆脱了它。你知道如何阻止它贯穿一切吗？它需要显示我点击的名称。

您正在添加用于将每个项目加载到相同按钮 ID (#base-stats-button) 的单击处理程序，因此当您单击它时，它会全部运行它们。请记住，每次在同一元素上调用 addEventListener() 时，事件侦听器都会叠加；它们不会被替换或覆盖

老实说，我是一个菜鸟，我不知道如何解决它