Calculating Total sum from a table

user_13994946 0
Viewed 132

I have the following table

<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>

this is text:

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

I am mapping over the items to render a list like this

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

I want to add another total row at the last like the following

          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

How will i achieve this.Because total is outside the mapped array. please help. Thanks.

reactjs javascript
2 Answers

You can use text object again, like this:

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)

So, try to refactor you code to something like this:

<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>
user_143898300

You could find the totals something like in the following and then use it as you have the item values:

const text = {"itemName1":{"Incoming":0,"on hand":2,"outgoing":4,"available":10},"itemName2":{"Incoming":0,"on hand":4,"outgoing":1,"available":9},"itemName3":{"Incoming":3,"on hand":2,"outgoing":0,"available":0}};

const array_unique = (array) => [...(new Set(array))];

const object_merge = (merge_fn, obj1, obj2) => {
  const all_keys = array_unique( Object.keys(obj1).concat(Object.keys(obj2)) );
  return all_keys.reduce(
    (acc, key) => Object.assign(acc, { [key]: merge_fn(obj1[key], obj2[key]) }),
    {}
  );
};

const merge_sum = (val1, val2) => (val1 ?? 0) + (val2 ?? 0);
const object_merge_sum = (obj1, obj2) => object_merge(merge_sum, obj1, obj2);

const get_totals = (items) =>
  Object.entries(items)
    .reduce((acc, [_, values]) => object_merge_sum(acc, values), {});

console.log(get_totals(text));

user_144549390
Related