将动态表从行转置到列，反之亦然

Question

config.previewData = [
    {
        Cartridges:27989,
        Total Accounts:294,
        Metrices:"MVC",
        Toner Cartridges:5928,
        INK Cartridges:22061
    },
    {
        Cartridges:56511,
        Total Accounts:376,
        Metrices:"SMB",
        Toner Cartridges:15253,
        INK Cartridges:41258
    },
    {
        Cartridges:84,500,
        Total Accounts:670,
        Metrices:"Grand Total",
        Toner Cartridges:21,181,
        INK Cartridges:63,319
    },
]

和我这样的html代码

<table class="table table-striped">
    <thead>
        <tr role="row">
            <th data-ng-repeat="(key, val) in config.previewData[0]">
                {{ key}}
            </th>
        </tr>
    </thead>

    <tbody>
        <tr data-ng-repeat="row in config.previewData">
            <td data-ng-repeat="column in row">
                {{column}}
            </td>
        </tr>
    </tbody>
</table>

此代码将完美打印，如下图所示

现在我想将此表转换为行到列和列到行。 这对动态表是否可行，因为我的对象是动态的而不是固定的。

如果有人知道如何做到这一点，请帮助我。 转置后的表是这样的

Answer 1

使用reduce ，你可以有这样的东西来转置你的数据，然后可以很容易地使用ng-repeat进行迭代！

示例片段（为了简化，在纯 JS 中）：

 var previewData = [{ "Cartridges": 27989, "Total Accounts": 294, "Metrices": "MVC", "Toner Cartridges": 5928, "INK Cartridges": 22061 }, { "Cartridges": 56511, "Total Accounts": 376, "Metrices": "SMB", "Toner Cartridges": 15253, "INK Cartridges": 41258 }, { "Cartridges": 84500, "Total Accounts": 670, "Metrices": "Grand Total", "Toner Cartridges": 21181, "INK Cartridges": 63319 } ] var transpose = previewData.reduce(function(arr, obj) { for (let key in obj) { if (obj.hasOwnProperty(key)) { arr[key] = arr[key] || [] arr[key].push(obj[key]) } } return arr }, {}) console.log(transpose)

Answer 2

使用您的示例代码所做的相同假设（即config.previewData始终包含至少一个对象，并且所有对象都具有相同的属性...）

<table class="table table-striped">
    <tbody>
        <tr data-ng-repeat="(key, val) in config.previewData[0]">
            <th>
                {{ key }}
            </th>
            <td data-ng-repeat="row in config.previewData">
                {{ row[key] }}
            </td>
        </tr>
    </tbody>
</table>

Answer 3

这是我能想到的唯一（肮脏）方式

<tr>
        <td data-ng-repeat="row in previewData">{{row['Metrices']}}</td>
    </tr>
    <tr>
        <td data-ng-repeat="row in previewData">{{row['Total Accounts']}}</td>
    </tr>
    <tr>
        <td data-ng-repeat="row in previewData">{{row['Toner Cartridges']}}</td>
    </tr>

...... 等等

其他选项：转置 JSON

Answer 4

如果您有一个可以通过该函数登录到控制台的二维数组

 tab = [[2,3,4],[-4,6,0],[1,0,9]]
 console.table(tab) 

您可以使用以下函数记录它的转置：

function transpose_table(tab) {
    let columns = tab.length;
    let rows = tab[0].length;
    
    let trans = [];
    
    for (i=0; i<rows; i++) {
        trans.push([]);
    }
    
    for (i=0; i<columns; i++) {
        for (j=0; j<rows; j++) {
            trans[j][i] = tab[i][j];
        }
    }

    return trans;
}

现在运行：

console.table(transpose_table(tab))