javascript - 从表中计算总和

Question

我有下表

<table>
              <thead>
                <tr>
                  <th>&nbsp;</th>
                  <th>Available</th>
                  <th>Incoming</th>
                  <th>On Hand</th>
                  <th>Outgoing</th>
                </tr>
              </thead>
              <tbody>
                {Object.entries(text).map(([key, value]) => {
                  return (
                    <>
                      <tr key={key}>
                        <td>
                          <TextField strong>{`${key}`}</TextField>
                        </td>
                        <td>{`${value["Available"]}`}</td>
                        <td>{`${value["Incoming"]}`}</td>
                        <td>{`${value["On Hand"]}`}</td>
                        <td>{`${value["Outgoing"]}`}</td>
                      </tr>
                    </>
                  );
                })}
                <tr>
                  <td>Total</td>
                </tr>
              </tbody>
            </table>

这是文本：

var text = {
 itemName1: {
    Incoming: 1,
    on hand: 1,
    outgoing: 1,
    available: 1,
 
 },
  itemName2: {
    Incoming: 1,
    on hand: 1,
    outgoing: 1,
    available: 1,
 
 }, 

我正在映射项目以呈现这样的列表

          availabe | Incoming | On Hand | Outgoing
itemName1  0        | 2        | 4       | 10 
itemName2  0        | 4        | 1       | 9 
itemName3  3        | 2        | 0       | 0

我想在最后添加另一个总行，如下所示

          availabe | Incoming | On Hand | Outgoing
itemName1  0        | 2        | 4       | 10 
itemName2  0        | 4        | 1       | 9 
itemName3  3        | 2        | 0       | 0
---------------------------------------------------
total      3        | 8        | 5       | 19 

我将如何实现这一点。因为总数在映射数组之外。请帮忙。谢谢。

标签： javascriptreactjs

Answer 1

您可以text再次使用对象，如下所示：

const text = {
  itemName1: {
    Incoming: 5,
    onhand: 10,
    outgoing: 15,
    available: 20,

  },
  itemName2: {
    Incoming: 10,
    onhand: 20,
    outgoing: 30,
    available: 40,

  }
}

let available = Object.values(text).map((item)=> item.available).reduce((a, b) => a + b, 0);
let incoming  = Object.values(text).map((item)=> item.Incoming).reduce((a, b) => a + b, 0);
let onhand = Object.values(text).map((item)=> item.onhand).reduce((a, b) => a + b, 0);
let outgoing = Object.values(text).map((item)=> item.outgoing).reduce((a, b) => a + b, 0);

console.log('Available: ', available)
console.log('Incoming: ', incoming)
console.log('Onhand: ', onhand)
console.log('Outgoing: ', outgoing)

因此，尝试将您的代码重构为如下所示：

<tr>
  <td>Total</td>
  <td>{Object.values(text).map((item)=> item.available).reduce((a, b) => a + b, 0)}</td>
  <td>{Object.values(text).map((item)=> item.Incoming).reduce((a, b) => a + b, 0)}</td>
  <td>{Object.values(text).map((item)=> item.onhand).reduce((a, b) => a + b, 0)}</td>
  <td>{Object.values(text).map((item)=> item.outgoing).reduce((a, b) => a + b, 0)}</td>
</tr>