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

【问题标题】：Transpose dynamic table from rows to columns and vice versa将动态表从行转置到列，反之亦然
【发布时间】：2017-04-27 19:07:11
【问题描述】：

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>

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

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

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

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

使用您的示例代码所做的相同假设（即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>

【讨论】：

【解决方案2】：

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

示例 sn-p（为了简化在纯 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)

【讨论】：

@dkc007 只是用作用域变量替换普通变量。这里使用纯 JS 只是为了简单

【解决方案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>

……等等

其他选项：Transposing JSON

【讨论】：