将JavaScript数组中的行转换为列

Question

将JavaScript数组中的行转换为列

4

我正在使用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

我发现了这个很好的库 - 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>

- Sri Reddy

如果您需要聚合现有的对象数组，则可以将其构建为一个新对象。 - RJ-

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafael · Accepted Answer

将集合转换为适合表格的数据结构

将集合和相应的属性描述符传递给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，用于放置您的 Question 字符串。
为每个 ch 在 col_headers 中添加一个 th。

制作表体

迭代通过 coll2tbl() 返回的 cells。
1. 每个父级迭代，都要创建一个新的 tr。
2. 通过使用父级迭代器的计数器来获取相应的行标题 (table.row_headers[i])，添加行标题单元格。
3. 内部循环将创建单元格 td(table.cells[i][j])。

理想情况下，您可以创建一个 React 组件，该组件接受此数据结构并为您创建 HTML。