从javascript数组将行转换为列

我正在研究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表/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

我发现了这个很棒的图书馆-。这是我想要使用的东西，但唯一的问题是聚合值

我在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>

var输出=coll2tbl（调查结果，“问题”、“日期”、“答案”）；
const mappedCells=output.cells.map（（行，索引）=>{
行取消移位（输出行标题[索引]）；
返回行；
})
问题:
{
output.col\u headers.map（c=>{
返回(
{c}
);
})                                    
}   
{
mappedCells.map（行=>(
{row.map（cell=>（{cell}））}
))
}                   

集合到表就绪数据结构 将集合和适当的属性描述符传递给

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

制作thead

将静态

th

添加到

thead

的开头，这就是您的

问题

字符串的位置

在列标题中为每个通道添加一个

th

制造车身

迭代

coll2tbl（）

返回的

单元格。
每次父迭代，创建一个新的
tr
通过使用父迭代器的计数器获取相应的行标题（
table.row\u headers[i]
），添加行标题单元格
内部循环将创建单元格，
td
，（
table.cells[i][j]
）

---

理想情况下，您可以创建一个react组件，该组件采用此数据结构并为您创建html。

如果您需要聚合现有的对象数组，请使用该数组构建一个新对象。我已经发布了一个关于您解决方案中一个bug的问题。