从javascript数组将行转换为列

时间:2017-10-12 01:21:23

标签: javascript json reactjs

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

1 个答案:

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

制作thead

  1. th的开头添加一个静态thead,这就是您的Question字符串的位置。
  2. 在col_headers
  3. 中为每个 ch 添加th

    制作tbody

    1. 迭代cells返回的coll2tbl()
      1. 每次父迭代,制作一个新的tr
      2. 使用父迭代器的计数器添加行标题单元格以获取相应的行标题(table.row_headers[i])。
      3. 内部循环将创建单元格td,(table.cells[i][j])。
    2. 理想情况下,您可以创建一个采用此数据结构的react组件并为您创建html。