Создание таблицы из массива в React

Попробуйте этот код для форматирования массива данных

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.info(JSON.stringify(table, null, 2));

Результат будет таким

[
  {
    "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
      }
    ]
  }
]

Здесь идея состоит в том, чтобы создать двумерный массив, заполненный нулями, затем проработать каждый элемент в массиве данных и увеличить правильное значение в двухмерном массиве на основе поиска с использованием карты имен секторов для индексов и карты валюты. имена в индексы.

Надеюсь, это поможет, хотя я чувствую, что, вероятно, есть лучший способ сделать это.

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.info(rows.map((row) => row.join(',')));