坚持 JavaScript 逻辑，以便使用获取和修改参数正确循环 JSON 对象

Question

我有一个包含以下数据的 JSON 文件：

[
    {
        "name": "Bitcoin (BTC)",
        "url": "https://openapiv1.coinstats.app/coins/bitcoin" ,
        "quantity": .15
    },
    {
        "name": "Ethereum (ETH)",
        "url": "https://openapiv1.coinstats.app/coins/ethereum" ,
        "quantity": 1
    },
    {
        "name": "Solana (SOL)",
        "url": "https://openapiv1.coinstats.app/coins/solana" ,
        "quantity": 5
    }
]

使用 Astro 框架，我尝试循环该文件中的对象，并将数据输出到简单样式的 HTML 卡中，以将非常基本的投资组合跟踪器作为一个有趣的学习项目。为了简洁起见，我不会显示所有代码结构，但我可以使用此逻辑导入 JSON 文件并轻松显示其数据：

{
    holdingData.map ((holdingData) => {
        return (
            <PortCard
                name={holdingData.name}
                quantity={holdingData.quantity}
                price={APIprice}
            />
        )
    })
}

然而，让我困惑的是最后一个属性，价格。我想在页面加载时加载该特定资产的价格（从 JSON 文件中为每个对象列出的 API url 中提取数据）。目前，我正在使用以下逻辑来使用 fetch 来执行此操作：

let APIfetch = await fetch(APIurl);
let APIresponse = await APIfetch.json();
let APIdata = APIresponse.price;
let APIprice = APIdata.toLocaleString("en-US", {style: "currency", currency: "USD"});

而且，具体来说，我无法弄清楚如何在 map 方法中为每次迭代传递变量 APIurl。

let APIurl = holdingData.url;

我尝试了各种不同的方法来实现该关键数据，但没有一个有效。我确信我的 JavaScript 基础知识非常缺乏，而且我缺少对 JS 逻辑的一些基本理解。

如果有人可以帮助澄清我在这个方程中缺少的内容并为我指出正确的方向，我将不胜感激。

Answer 1

我认为您无法修改地图函数内的 API url。因为它是异步的。在下一次迭代开始之前，您的网址可能会被覆盖。

你可以尝试

Promise.all()

。

您必须创建一组 API 调用并使用

Promis.all()

来执行它们。解决所有承诺后，您可以访问每个持仓的数据。

如下所示。

const fetchData = async (holdings) => {
  const promises = holdings.map(async (holding) => {
    const response = await fetch(holding.url);
    const data = await response.json();
    return { ...holding, price: data.price };
  });

  const updatedHoldings = await Promise.all(promises);
  return updatedHoldings;
};

您可以像下面这样调用该函数

fetchData(holdingData).then((updatedHoldings) => {
  return (
    <div>
      {updatedHoldings.map((holding) => (
        <PortCard
          name={holding.name}
          quantity={holding.quantity}
          price={holding.price}
        />
      ))}
    </div>
  );
});