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

У меня есть массив с указанием зарплаты в разных секторах. Мне нужно рассчитать, а затем создать таблицу на основе этого файла . Я действительно запутался, как это сделать. Вот пример данных

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

Теперь мне нужно отобразить сектор, зарплату и общую сумму в таблице, как показано ниже:

Сектор Евро GBX доллар США Общий Технология 1 0 1 2 Здоровье 0 1 0 1 Недвижимость 1 1 0 2 Общий 2 2 1 5

Не могли бы вы помочь мне с этим? Я использую таблицу React для отображения данных.

Можете ли вы показать нам, что вы пробовали?

mgm793 14.02.2023 13:30
let eur = 0; let usd = 0; let gb = 0; for (let rowInd = 0; rowInd < data.length; rowInd++){ const row = res[rowInd]; for (let colInd = 0; colInd < row.length; colInd++){ const salary = row[colInd] if (salary === 'EURO') { eur++; } else if (salary === 'USD'){ usd++; } else { gb++ } } }
Somdotta Sarkar 14.02.2023 13:47

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

Somdotta Sarkar 14.02.2023 13:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

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

Спасибо за приведенное выше предложение, но оно не увеличило значение. В соответствии с требованием мы должны увеличить значения.

Somdotta Sarkar 14.02.2023 16:45

какое значение увеличивать? ты имеешь в виду итоги?

Sharqi 14.02.2023 17:01

Я думаю, они имеют в виду, что если вы добавите второй элемент ['GBX', 'Health'] в массив данных, он все равно будет иметь только 1 в ячейке GBX Health, а они хотели бы, чтобы у него было 2.

Ben Stephens 14.02.2023 17:21

@BenStephens спасибо, @SomdottaSarkar, вы можете просто изменить это ``` if (values.includes(element)) { const sum = values.reduce((a, c) => { if (c === element) a++; return а; }, 0); таблица[индекс].значения[я] = {название: элемент, значение: сумма}; } else { table[index].values[i] = { title: element, value: 0 }; }```

Sharqi 14.02.2023 20:16
Ответ принят как подходящий

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

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

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(',')));

Другие вопросы по теме