Javascript数据透视和从对象生成动态表

我正在接收一个数据对象，该对象包含已旋转的结果，无法更改返回给我的结构。此时，我唯一的选择是操纵数据，以按照需要的方式对其进行解析

以下是我的结果：

  // Object from service
  let dataObj = [{
    CostCenter: '12345',
    HasLevel1Access: 'No',
    HasLevel2Access: 'No',
    HasLevel3Access: 'Yes',
    FirstName: 'Bob',
    LastName: 'Jones',
    UID: '12345' 
  },
  {
    CostCenter: '555',
    HasLevel1Access: 'Yes',
    HasLevel2Access: 'No',
    HasLevel3Access: 'Yes',
    FirstName: 'Tommy',
    LastName: 'C',
    UID: '6789'
  },
  {
    CostCenter: '51112',
    HasLevel1Access: 'Yes',
    HasLevel2Access: 'No',
    HasLevel3Access: 'Yes',
    FirstName: 'Smithson', 
    LastName: 'J',
    UID: '8888'
  }];

根据这些数据，我需要制作一个表格。这里的技巧是，我需要使用一些属性名作为列标题，但排除其他属性名

我的表非常基本，它包含人名，然后是所有动态列名：

<table class="table table-condensed" border="1">
      <thead>
        <tr>
          <th>Employee Name</th>
          <th *ngFor="let m of columnNames">{{ m }}</th>
        </tr>
      </thead>
      <tbody>
        <!-- Example Record 0 -->
        <tr>
          <td>Bob Jones</td>
          <td>No</td>
          <td>No</td>
          <td>Yes</td>
        </tr>
        <!-- Example Record 0 -->
      </tbody>
    </table> 

然后，我在结果集中的第一条记录上循环，并将所有属性名推送到一个数组中，该数组不在我们的

ignoreColumns

数组中。这给我留下了一个独特的动态列数组

// Find all the keys in our first result
for (var p in dataObj[0]) {

  // Get the key names
  if (dataObj[0].hasOwnProperty(p)) {

    // If this key name doesnt already exist in the array AND its not in our ignored list push them to our array
    if (!_.includes(this.columnNames, p) && !_.includes(this.ignoreColumns, p)) {
      this.columnNames.push(p);
    }

  }

}

我被困在这一点上。我能够创建具有适当标题的表结构，但我不知道如何将数据与表中的正确列对齐

// Hold all of the column names
private columnNames = [];

// Ignore these columns, they dont get printed as headers
private ignoreColumns = ['CostCenter', 'FirstName', 'LastName', 'UID'];

这就是我在最终输出中的目标：

<table class="table table-condensed" border="1">
    <thead>
    <tr>
        <th>Individual</th>
        <th>HasLevel1Access</th>
        <th>HasLevel2Access</th>
        <th>HasLevel3Access</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Bob Jones</td>
        <td>No</td>
        <td>No</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Tommy C</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>Smithson J</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
    </tr>
    </tbody>
</table>

个人
haslevel1访问
HasLevel2Access
HasLevel3Access
鲍勃·琼斯
不
不
对
汤米C
对
不
对
史密森J
对
不
对

以下是我所处的位置：

关于如何处理这个问题有什么建议吗？

怎么样

      <tr *ngFor="let item of dataObj">
          <td>{{item.FirstName}} {{item.LastName}}</td>
          <td *ngFor="let m of columnNames">{{item[m]}}</td>
        </tr>

{{item.FirstName}{{item.LastName}}
{{item[m]}

---

你的意思是这样的

<tr *ngFor="let data of dataObj">
          <td>{{data.FirstName+" "+data.LastName}}</td>
          <td>{{data.HasLevel1Access}}</td>
          <td>{{data.HasLevel2Access}}</td>
          <td>{{data.HasLevel3Access}}</td>
        </tr>

{{data.FirstName+“”+data.LastName}
{{data.HasLevel1Access}
{{data.HasLevel2Access}
{{data.HasLevel3Access}

---

好吧，该死，这似乎管用——我写问题的时间比你指出简单答案的时间要长：）。谢谢谢谢你的回复，不过，我之所以要走我提到的另一条路，是因为键名是动态的，我不能像那样将它们硬编码到我的HTML中。