Javascript结合2个地图数组答案

【问题标题】：Javascript combine 2 map arraysJavascript结合2个地图数组
【发布时间】：2021-11-11 12:15:34
【问题描述】：

我有一个关于我拥有的 2 个数组的问题。我一直在将一个数组映射到一个表中。第一个数组如下所示：

{data.portfolioHoldings.map((portfolioholding) => (
      <tbody key={portfolioholding.id}>
        <tr key={portfolioholding.id}>
          <th scope="row">{portfolioholding.id}</th>
          <td>{portfolioholding.ticker_symbol}</td>
          <td>{portfolioholding.amount}</td>
          <td>{portfolioholding.fees}</td>))}

生成如下表格：

但是我有另一个数组（来自不同的 api 源）：

我想将这 2 个数据源合并到 1 个表中。如您所见，第二个数组的 ID 1 是 149.03。我想在“fees”后面再写一个，表示 ID 为 1 的最新价格。

如何映射两个数组并像一个一样一起工作？

提前谢谢你！！！

【问题讨论】：

"第二个数组的 ID 1" -> 我在第二个数组中看不到任何 id。你是说第二个数组的第一个元素，意思是array2[0]？

标签： javascript arrays reactjs api dictionary

【解决方案1】：

如果我正确理解您的问题，假设您的第二个数组名为arr2，您可以这样做：

{data.portfolioHoldings.map((portfolioholding, index) => (
      <tbody key={portfolioholding.id}>
        <tr key={portfolioholding.id}>
          <th scope="row">{portfolioholding.id}</th>
          <td>{portfolioholding.ticker_symbol}</td>
          <td>{portfolioholding.amount}</td>
          <td>{portfolioholding.fees}</td>))
          <td>{arr2[index].quote.latestPrice}</td>))
}

确保两个数组的长度相同，并且第二个数组的每个元素中应始终包含quote.latestPrice，否则会出现错误。

请注意，您的tbody 似乎应该在map 函数之外，每个表只需要一个tbody

【讨论】：

【解决方案2】：

合并数据，像这样？

let data1 = [
    { id: "1", name: "AAPL", amount: 154, fees: 0.5 },
    { id: "1", name: "AMZN", amount: 3000, fees: 0.5 },
];

let data2 = [
    { id: "1", lastePrice: 149.55 },
    { id: "2", lastePrice: 3475.79 }
];

const allData = (d1, d2) =>
    d1.map(item1 => ({
        ...d2.find((item2) => (item2.id === item1.id) && item2),
        ...item1
    }));

console.log( allData(data1, data2));

【讨论】：