基于另一列聚合React中表中列的值答案

【问题标题】：Aggregating the values of a column in table in React based on another column基于另一列聚合React中表中列的值
【发布时间】：2017-05-25 16:16:02
【问题描述】：

我从 api 获取数据并将其显示在一个有 2 列的表中。第一列包含名称，第二列包含金额，如表 1 所示。 api中的数据包含重名，同名金额不同。我想以这样一种方式显示，它总结了唯一名称的金额并仅显示唯一名称和总金额，如表 2 所示。我正在使用 ReactJS 来显示表格。获得此结果的更好逻辑是什么。我正在从 api 作为 json 检索数据并将其放入数组中。我对 React 很陌生，并且发现很难使用这些数据。

【问题讨论】：

到目前为止你有什么代码/逻辑？
您是否可以控制 API？另外，将问题分成更小的步骤。尝试在出现时显示行。尝试获取数据并将其显示在控制台中。聚合值是一个 javascript 问题，而不是反应问题。
我从 api 获取数据，将其存储为数组（this.state.data），并显示 Table1。现在我想在单独的数组中获取 Table2 中所需的数据。
不，我无法控制 api。我已经显示了数据并得到了 Table1。是的，我一直在汇总这些值。

标签： javascript reactjs frontend reactjs-native

【解决方案1】：

核心问题并不是真正与react相关的问题，因此，考虑到我无法影响API，我们可以解决javascript中的聚合。一个有用的库是“lodash”——它知道如何做一个经典的“reduce”，并且知道如何从一个对象创建一个数组。在节点控制台上解决这个问题，我们得到：

npm install lodash
node
>

...

const ld = require("lodash");
a = [{n: "joe", d: 1},{n: "joe", d: 1}, {n: "joe", d: 3} ]
b = ld.reduce(a, (agg, {n,d}) => { agg[n] = (agg[n] || 0) + d; return agg; }, {});
ld.map(b, (val,prop) => ({ n: prop, d: val});

最后一行的返回值给你

[ { n: 'joe', d: 5 } ]

【讨论】：

您是否还可以添加代码以将 json 数组 'a' 中的参数 'd' 从字符串转换为浮点数。
这很容易用谷歌搜索，可能有一个链接到这个网站
我搜索过。我想做的是将json对象的参数类型更改为float。我用过var c = ld.map(a, (item) => {item.d= parseFloat(item.d); return item;}, {}) 但它让我回南