CODEWITHSUNDEEP
javascriptangular
SBB
SBB

Reputation: 8970

Javascript pivoting data and generating dynamic table from object

I am receiving a data object of results that have been pivoted and I am unable to change the structure that is returned to me. My only option at this point is to manipulate the data to parse it how I need to.

Here is what my results look like:

  // 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'
  }];

From this data, I need to make a table. The trick here is that I need to use some of the property names as the column headers but exclude others.

My table is very basic, it contains the persons name and then all of the dynamic column names:

<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>

The first thing I did in order to get the column names is create an array of the IgnoreColumns which is the property names I wan't to exclude from being its own column in the table.

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

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

I then looped over the first record in the result set and pushed all of the property names to an array that are not in our ignoreColumns array. This leaves me with a unique array of the dynamic columns.

// 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);
    }

  }

}

I am stuck at this point. I was able to create the table structure with the headings in place but I don't know how I should proceed to get the data aligned under the correct columns in the table.

This is what I am going for in my final output:

<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>

Here is a plunkr of where I am at: http://plnkr.co/edit/9WygBXsQaDaxTMudb7ZB?p=preview

Any advice on how to approach this?

Upvotes: 0

Views: 385

Answers (2)

Vikram Kumar
Vikram Kumar

Reputation: 310

You meant something like this?

<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>

http://plnkr.co/edit/EHsVFaiaK1UUcWrbm6zX?p=preview

Upvotes: 0

jitender
jitender

Reputation: 10429

What about 

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

Working demo

Upvotes: 1

Related Questions