时间戳

首页 > 解决方案 > 使用 fetch 结果作为函数参数

javascript - 使用 fetch 结果作为函数参数

问题描述

我有 fetchTeam(teamName) 函数，它获取一组玩家并以 HTML 格式显示它们。另一个函数将玩家名称作为参数并显示玩家统计数据。像这样的东西......

let result = document.getElementById("result");
let teamName;

const fetchTeam = async (teamName) => {
  teamName = document.getElementById("teamName").value;
  const response = await fetch(`http://localhost:3000/${teamName}`);
  const data = await response.json();
  let team = data.teamStats;
  let players = data.playerStats;
  const teamName = team[0].Name;
  const logo = team[0].Logo;
  const WL = team[0].WL;

  result.innerHTML = `

<br><div class="top">
<h3>${teamName}</h3>
<h4>Win / Loss: ${WL}</h4>
<img src=${logo}></div>
<div class="flex-container">
<div class="flex-child">
<button class='name' onclick="fetchPlayer("${players[0][0].Player}")> ${players[0][0].Player} </button> ...
`

除了底部的 onclick fetchPlayer 函数之外，一切都很好。下面是代码：

const results = document.getElementById("results");

const fetchPlayer = async (player) => {
  const response = await fetch(`https://get-player.herokuapp.com/${player}`);
  const data = await response.json();

results.innerHTML = `
<br>
<div class="layout">
        <div class="child"><img src="${data.sprite}[0]"><br>${data.mons[0]}</div>
`

如您所见，我想显示团队成员，然后单击成员名称将显示他们的统计信息。

编辑：格式

标签： javascriptnode.js

解决方案

您的代码中有几个问题。

首先，您teamName在fetchTeam函数中重新声明。那是行不通的。

const fetchTeam = async (teamName) => {
  teamName = document.getElementById("teamName").value;
  ...
  const teamName = team[0].Name;
}

其次，您的按钮语法不正确：
<button class='name' onclick="fetchPlayer("${players[0][0].Player}")>
应该是
<button class='name' onclick="fetchPlayer('${players[0][0].Player}')">

第三，正如在这个答案中指出的那样，你的fetchPlayer功能
<img src="${data.sprite}[0]">应该是<img src="${data.sprite[0]}">

推荐阅读