Angular 1.5 create a table avoiding duplicate values

Question

I'm trying to create a table I have the following code

<tr ng-repeat="value in sd.data>
   <td >{{value.syscode}}</td>
   <td>{{value.out_signal_id}}</td>
   <td>{{value.sig_epoch_utc}}</td>
   <td>{{value.num_of_signals}}</td>
   <td>{{value.status_code}}</td>
   <td>{{value.status_note}}</td>


  <tr >

This is an example how the table looks like after the array has been looped by ng-repeat

syscode | out_signal_id  | sig_epoch_utc | num_of_signals | status_code | status_note


2221111 |   12323454343  | 2093236693029 | 120000000000   | 3030000000|  no-errors

2221111 |   12323454343  | 2093235593029 | 120000000000   | 3030000000| no-errors-1

2221111 |   12323454343  | 2093233393029 | 120000000000   | 3030000000| no-errors-2

I am trying to skip the repeated values on 'syscode' in this case I just need only one '2221111' not 3 of them, I did look through other answers for questions similar to this one, but that didn't answer my question. Any answer will be appreciated thanks!

Do you care about which version of status_note gets displayed? — WhiteHotLoveTiger
– WhiteHotLoveTiger, Commented May 25, 2017 at 17:49
@WhiteHotLoveTiger all of the status_note values have to rendered, the only values not to be displayed are the repeated values for syscode, but the order doesn't matter if that is what you are asking, it doesn't matter if status_note is in order or not — hjm
– hjm, Commented May 25, 2017 at 17:51
Ok, so you still want all three rows displayed, but with the first column only getting printed the first time if there's duplicates in that column? — WhiteHotLoveTiger
– WhiteHotLoveTiger, Commented May 25, 2017 at 17:57

CodeWarrior · Accepted Answer · 2017-05-25 18:24:16Z

1

Here is a working plunker: https://plnkr.co/edit/zWXR7k2H9hMwza5H2ZfU?p=preview

I'm making the assumption that the rows will be sorted based on syscode and all rows with same syscode will be adjacent.

Track the ng-repeat by $index ng-repeat="value in sd.data track by $index" and compare the value of the syscode in the current row to the previous row. If it is the same, display blank value. <td>{{($index>0 && sd.data[$index].syscode === sd.data[$index-1].syscode) ? '' : value.syscode}}</td>

answered May 25, 2017 at 18:24

CodeWarrior

2,8713 gold badges20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charliebeckwith · Accepted Answer · 2017-05-25 18:02:11Z

If the status note will always be 'no-errors' and that is the row of data you want, then this can be easily fixed with an ng-if directive. Otherwise, i'd recommend filtering the dataset and removing repeat values and putting that array on the scope or creating a filter.

<tr ng-repeat="value in sd.data" ng-if="value.status_note === 'no-errors'>
   <td >{{value.syscode}}</td>
   <td>{{value.out_signal_id}}</td>
   <td>{{value.sig_epoch_utc}}</td>
   <td>{{value.num_of_signals}}</td>
   <td>{{value.status_code}}</td>
   <td>{{value.status_note}}</td>
  <tr >

Chihuahua Enthusiast · Accepted Answer · 2017-05-25 18:06:35Z

1

You can do a 'unique' filter on the syscode attribute. You'll have to get Angular-UI:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

Add it as a module dependency:

var app = angular.module('yourProjectName', ['ui.filters']);

Then specify the filter:

<tr ng-repeat="value in sd.data | unique:'syscode'" >

answered May 25, 2017 at 18:06

Chihuahua Enthusiast

1,5801 gold badge21 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular 1.5 create a table avoiding duplicate values

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related