How to remove redundancy in this table?

Question

I have this JSON

 "allSMSData": [
    [
      {
        "key": "SMS Date",
        "value": "17-08-2016 10:19"
      },
      {
        "key": "Sender Name"
      },
      "Sushmitha",
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-08-2016 10:19"
      },
      {
        "key": "Sender Name",
        "value": "Sushmitha"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-08-2017 10:19"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP. nach has done"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "22-08-2017 07:21"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Account Details: Bill Cycle: 20th to 19th, Bill Date: 21st of every month, Bill Due Date: Bill Date + 18 days. For Plan Tariff, ISD and roaming tariff details, click www.airtel.in, Nach"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "22-08-2017 10:19"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-09-2017 10:19"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP. nach has done. Bureau sent. Loan Credited.EMi qwr f ff. bounce."
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "22-09-2017 07:21"
      },
      {
        "key": "Sender Name",
        "value": "AZ-AIRCCM"
      },
      {
        "key": "Original Message",
        "value": "Account Details: Bill Cycle: 20th to 19th, Bill Date: 21st of every month, Bill Due Date: Bill Date + 18 days. For Plan Tariff, ISD and roaming tariff details, click www.airtel.in, Nach, Score done 0 loan"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "01-12-2017 11:42"
      },
      {
        "key": "Sender Name",
        "value": "AM-MUBBLE"
      },
      {
        "key": "Original Message",
        "value": "Thank you for choosing Mubble https://x38uh.app.goo.gl/zgxL For your transaction UQ0SCZQ8, OTP is 459734.. Pls do not share with anyone"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "11-12-2017 11:42"
      },
      {
        "key": "Sender Name",
        "value": "AM-MUBBLE"
      },
      {
        "key": "Original Message",
        "value": "Rs. 00000 Deposited to your A/c *********000285 Details: NEFT-HUMMINGWAVE.Tot Bal:35201.57CR Avl Amt:- 35201.57(04-09-2017 13:08:20)"
      }
    ],
    [
      {
        "key": "SMS Date",
        "value": "21-01-2018 10:19"
      },
      {
        "key": "Sender Name",
        "value": "Sushmitha"
      },
      {
        "key": "Original Message",
        "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
      }
    ]
  ]

In my template, I am running two nested for loop

<table id="customers" *ngIf="allSMSData">
<caption *ngIf="allSMSData">
<h4> SMS Insights</h4>
  </caption>
<div *ngFor="let item of allSMSData">
<tr *ngFor="let i of item">
  <td class="key" width="50%">
    {{i.key}}
  </td>
  <td class="value" width="25%">{{i.value}}</td>
</tr>
  </div>
</table>

and it is displaying like this

As can be seen, SMS Date, Sender Name, & Original message is repeating again and again. How can I tranform it so that SMS Date, Sender Name & Original Message could be the table header and their values in table body?

Possible duplicate of [What is the most efficient method to groupby on a JavaScript array of objects?](https://stackoverflow.com/questions/14446511/what-is-the-most-efficient-method-to-groupby-on-a-javascript-array-of-objects) — JanS, Jan 24 '18 at 09:42

score 1 · Accepted Answer · answered Jan 24 '18 at 11:43

Assuming your data always return > 1 records, you can do the following:

<table class="table">
<thead>
    <tr>
        <th *ngFor="let val of tblHeader">{{ val }}</th>
    </tr>
</thead>
<tbody>
<tr *ngFor="let row of data">
  <td *ngFor="let col of row">
    {{ col.value }}
  </td>
</tr>
</tbody>

Component Ts file:

const [ first ] = allSMSData;

// get keys only for table header
this.tblHeader = first.map(x => x['key']);
this.data = allSMSData;

Full Demo: https://stackblitz.com/edit/angular-wvzdye

score 0 · Answer 2 · answered Jan 24 '18 at 09:45

Why are your objects like this

{
  "key": "SMS Date",
  "value": "17-08-2016 10:19"
}, {
  "key": "Sender Name"
},
"Sushmitha", {
  "key": "Original Message",
  "value": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
}

And not like this ?

{
  "SMS Date": "17-08-2016 10:19",
  "Sender Name": "Sushmitha",
  "Original Message": "Dear Customer, below mentioned updation has been done for Airtel Mobile 8861680006.\n\nService Activated:\na. Child Connection Data Usage Limit_2 GB_FP\n\nService Deactivated:\na. Child Connection Data Usage Limit_0.5 GB_FP salary has credited"
}

This would ease your code so much !

// TS
get dataKeys() { return Object.keys(this.allSMSData[0]) || []; }

// HTML
<table id="customers" *ngIf="allSMSData">
  <caption *ngIf="allSMSData">
    <h4> SMS Insights</h4>
  </caption>
    <tr>
      <th*ngFor="let key of dataKeys">{{key}}</th>
    </tr>
    <tr *ngFor="let item of allSMSData">
      <td *ngFor="let key of dataKeys">{{item[key]}}</td>
    </tr>
</table>

Actually data is coming in key-value pair only. Can you please tell me what is dataKeys in this? — Humble Dolt, Jan 24 '18 at 10:05
Well you should reduce your array of data to cope with the model I gave you then. `dataKeys` is a getter that returns all of the keys of your object as an array. Look at the first line of the last chunk of code I gave you :) — , Jan 24 '18 at 10:29

score 0 · Answer 3 · answered Jan 24 '18 at 09:47

You switched the rows and the columns.

Also, make sure you change your JSON Schema to represent the data accordingly to what you wish.

SMS Date, Sender Name, & Original message should be the columns, the data coming from the JSON should be inside the rows.

How to remove redundancy in this table?

3 Answers3