我正在研究ReactJS,并想知道是否有办法将javascript数组从行转换为列。
[
{ study: 'KOOS', date: '05/06/2005', question: 'Standing upright', answer: 'Moderate' },
{ study: 'KOOS', date: '05/06/2006', question: 'Standing upright', answer: 'Severe' },
{ study: 'KOOS', date: '05/06/2007', question: 'Standing upright', answer: 'Extreme' },
{ study: 'KOOS', date: '05/06/2008', question: 'Standing upright', answer: 'Severe' },
{ study: 'KOOS', date: '05/06/2005', question: 'Going up or down stairs', answer: 'Extreme' },
{ study: 'KOOS', date: '05/06/2006', question: 'Going up or down stairs', answer: 'Moderate' },
{ study: 'KOOS', date: '05/06/2007', question: 'Going up or down stairs', answer: 'Extreme' },
{ study: 'KOOS', date: '05/06/2008', question: 'Going up or down stairs', answer: 'Moderate' }
]
我想将此转换为数据html table / div,如下所示:
Study: Koos
Question | 05/06/2005 | 05/06/2006 | 05/06/2007 | 05/06/2008
Standing upright | Moderate | Severe | Extreme | Severe
Going up or down stairs | Extreme | Moderate | Extreme | Moderate
我找到了这个优秀的图书馆 - json-to-pivot-json。这是我想要使用的东西,但唯一的问题是聚合值。
我在sql中看到了很多例子但是找不到与javascript类似的东西。
为了帮助其他人,我正在添加完整的JSX代码以显示Rafael
建议的结果。
var output = coll2tbl(surveyResult, "question", "date", "answer");
const mappedCells = output.cells.map((row, index) => {
row.unshift(output.row_headers[index]);
return row;
})
<table>
<thead>
<th>Question</th>
{
output.col_headers.map(c => {
return (
<th>{c}</th>
);
})
}
</thead>
<tbody>
{
mappedCells.map(row => (
<tr>{ row.map(cell => (<td>{cell}</td>))}</tr>
))
}
</tbody>
</table>
答案 0 :(得分:1)
将集合和相应的属性描述符传递给coll2tbl
函数,它将输出一个表格就绪的数据结构:
var data = [
{ study: 'KOOS', date: '05/06/2005', question: 'Standing upright', answer: 'Moderate' },
{ study: 'KOOS', date: '05/06/2006', question: 'Standing upright', answer: 'Severe' },
{ study: 'KOOS', date: '05/06/2007', question: 'Standing upright', answer: 'Extreme' },
{ study: 'KOOS', date: '05/06/2008', question: 'Standing upright', answer: 'Severe' },
{ study: 'KOOS', date: '05/06/2005', question: 'Going up or down stairs', answer: 'Extreme' },
{ study: 'KOOS', date: '05/06/2006', question: 'Going up or down stairs', answer: 'Moderate' },
{ study: 'KOOS', date: '05/06/2007', question: 'Going up or down stairs', answer: 'Extreme' },
{ study: 'KOOS', date: '05/06/2008', question: 'Going up or down stairs', answer: 'Moderate' }
];
function get_prop(obj, prop) {
return prop.split('.').reduce((o,k) => obj[k], obj);
}
function coll2tbl(coll, row_header, col_header, cell) {
var table = {};
var row_headers = [];
var cols = {};
coll.forEach(a => {
var h = get_prop(a, row_header);
if (h in table === false) {
table[h] = {};
row_headers.push(h);
}
var c = get_prop(a, col_header);
cols[c] = null;
table[h][c] = get_prop(a, cell);
});
var cells = [];
for (var row in table)
cells.push(Object.values(table[row]));
return { row_headers, col_headers: Object.keys(cols), cells };
}
var table = coll2tbl(data, 'question', 'date', 'answer');
console.log(table);
输出:
{ row_headers: [ 'Standing upright', 'Going up or down stairs' ],
col_headers: [ '05/06/2005', '05/06/2006', '05/06/2007', '05/06/2008' ],
cells:
[ [ 'Moderate', 'Severe', 'Extreme', 'Severe' ],
[ 'Extreme', 'Moderate', 'Extreme', 'Moderate' ] ] }
th
的开头添加一个静态thead
,这就是您的Question
字符串的位置。th
醇>
cells
返回的coll2tbl()
。
tr
。table.row_headers[i]
)。td
,(table.cells[i][j]
)。理想情况下,您可以创建一个采用此数据结构的react组件并为您创建html。