Сопоставление строк таблицы с значениями объекта без повторения

70
8

У меня есть массив данных, состоящий из двух объектов. Мне нужно пройти через массив данных и поместить значения одного и того же ключа в одну строку. Например, все ключи = 'a' должны идти в одной строке, но в другом столбце. Как я могу достичь этого, не повторяясь, как это было в приведенных ниже примерах?

Вот моя структура данных

const data = [{a:1. b:2, c:3, d:3},{a:2, b:5, c:1, d:5}] 
<table className="table study">
<tbody>
<tr>
<th></th>
{data.map((item, key) => <th key={key}>{item.a}
</th>
)}
</tr>
<tr>
<td>Title A</td>
{data.map((item, key) => (
<td key={key}>{item.a}</td>
))}
</tr>
<tr>
<td>Title B</td>
{data.map((item, key) => (
<td key={key}>{item.b}</td>
))}
</tr>
<tr>
<td>Title C</td>
{data.map((item, key) => <td key={key}>{item.c}
</td>)}
</tr>

</tbody>
</table>

спросил(а) 2018-07-26T17:47:00+03:00 2 года, 2 месяца назад
1
Решение
58

Я считаю, что вы хотите что-то в этом духе:

const data = [{ a: 1, b: 2, c: 3, d: 3 }, { a: 2, b: 5, c: 1, d: 5 }];
<table className="table study">
<tbody>
<tr>
<th />
{data.map((item, key) => <th key={key}>{item.a}</th>)}
</tr>
{Object.keys(data[0]).map(key => {
return (
<tr>
<td>Title {key.toUpperCase()}</td>
{data.map((item, idx) => <td key={key+idx}>{item[key]}</td>)}
</tr>
);
})}
</tbody>
</table>

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

ответил(а) 2018-07-26T18:05:00+03:00 2 года, 2 месяца назад
41

Вы можете сгладить данные перед их использованием.

Я нахожу его более легким для того чтобы изменить данные в полезную форму когда я бегу в проблемы как это.

// Can have different keys across objects (if you want)
const rawData = [
{ a: 1, b: 2, c: 3, d: 3 },
{ a: 2, b: 5, c: 1, d: 5 },
{ e: 2, f: 5, c: 1, d: 5 },
{ b: 5, c: 1, e: 5 },
];

// Flattens to { key: [...values] }
const flattenedData = rawData.reduce((acc, curr) => {
for (const key in curr) {
if (!curr.hasOwnProperty(key)) {
continue;
}

if (!acc[key]) {
acc[key] = [];
}

acc[key].push(curr[key]);
}

return acc;
}, {});

const Table = ({ data }) => (
<table className="table study">
<tbody>
{Object.keys(data).map(rowKey => (
<tr key={rowKey}>
<th>Title {rowKey.toUpperCase()}</th>
{data[rowKey].map((item, cellKey) => (
<td key={cellKey}>{item}</td>
))}
</tr>
))}
</tbody>
</table>
);

ReactDOM.render(<Table data={flattenedData} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

ответил(а) 2018-07-26T18:41:00+03:00 2 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема