Question 74374 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Building a table from an array in React – Reactjs

I have an array stating salary of different sectors. I need to calculate and then create a table based on this . I’m really confused how to do it . Here is an example data

const data=[
['Euro','Tech'],
['USD','Tech'],
['GBX', 'Health'],
['Euro', 'Real Estate'], 
['GBX', 'Real Estate'].
]

Now I have to display the sector ,salary & total in the Table like this below:

Sector Euro GBX USD Total
Tech 1 0 1 2
Health 0 1 0 1
Real Estate 1 1 0 2
Total 2 2 1 5

Could you help me with this. I’m using React table to display the data.

Tags:

2

Answers


  1. 0

    try this code to format data array

    const data = [
  ['Euro', 'Tech'],
  ['USD', 'Tech'],
  ['GBX', 'Health'],
  ['Euro', 'Real Estate'],
  ['GBX', 'Real Estate'],
];

let res = {};
let currencies = [];
data.map((item) => {
  const [val, key] = item;
  res[key] ? res[key].push(val) : (res[key] = [val]);
  if (!currencies.includes(val)) currencies.push(val);
});

const rows = Object.keys(res); //Tech, Health, Real Estate

const table = new Array(rows.length);
let index = 0;

for (let row = 0; row < currencies.length; row++) {
  key = rows[row];
  const values = Object.values(res[key]);
  table[index] = { title: key, values: new Array(currencies.length) };
  for (let i = 0; i < currencies.length; i++) {
    const element = currencies[i];
    if (values.includes(element)) {
      table[index].values[i] = { title: element, value: 1 };
    } else {
      table[index].values[i] = { title: element, value: 0 };
    }
  }
  index++;
}

console.log(JSON.stringify(table, null, 2));

    result will be like this

    [
  {
    "title": "Tech",
    "values": [
      {
        "title": "Euro",
        "value": 1
      },
      {
        "title": "USD",
        "value": 1
      },
      {
        "title": "GBX",
        "value": 0
      }
    ]
  },
  {
    "title": "Health",
    "values": [
      {
        "title": "Euro",
        "value": 0
      },
      {
        "title": "USD",
        "value": 0
      },
      {
        "title": "GBX",
        "value": 1
      }
    ]
  },
  {
    "title": "Real Estate",
    "values": [
      {
        "title": "Euro",
        "value": 1
      },
      {
        "title": "USD",
        "value": 0
      },
      {
        "title": "GBX",
        "value": 1
      }
    ]
  }
]
    Login or Signup to reply.
  2. 0

    Here the idea is to create a two dimensional array filled with zeros, then work through each item in the data array and increment the correct value in the two diminsional array based on a lookup using a map of sector names to indexes and a map of currency names to indexes.

    Hopefully it helps, though I feel like there’s probably a better way to do it.

    const data = [
  ['Euro','Tech'],
  ['USD','Tech'],
  ['GBX', 'Health'],
  ['Euro', 'Real Estate'], 
  ['GBX', 'Real Estate'],
  ['GBX', 'Health'],
];

const array_unique = (arr) => Array.from(new Set(arr));

const sectors = array_unique( data.map(([_, sector]) => sector) );
const currencies = array_unique( data.map(([currency]) => currency) ).sort();

const sector_map = Object.fromEntries(
  sectors.map((sector, index) => [sector, index])
);

const currency_map = Object.fromEntries(
  currencies.map((currency, index) => [currency, index])
);

// zero fill 2 dimensional array
const values_matrix = sectors.map( () => currencies.map(() => 0) );

// increment values in the 2 dimensional array for each item in the data array
// getting the row index and column index from the sector_map and currency_map
for(const [currency, sector] of data) {
  values_matrix[ sector_map[sector] ][ currency_map[currency] ]++;
}


// create rows for a table
const rows = [['Sector', ...currencies]];
for(const [index, sector] of sectors.entries()) {
  rows.push([sector, ...values_matrix[index]]);
}

console.log(rows.map((row) => row.join(',')));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search