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

Question

我正在尝试从 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);
      });
   }

Answer 1

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

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