CODEWITHSUNDEEP
htmlangular
Miriam
Miriam

Reputation: 59

Remove duplicates and sort from smallest to largest angular array

In my ts I have this array:

locations: string[];

  builder() {
    this.locations = [
      '01-34-56-75-41',
      '10-34-22-75-53',
      '26-34-34-75-63',
      '00-89-56-75-43',
      '10-34-56-75-43',
      '20-33-56-75-43',
      '00-34-56-75-43',
      '00-34-56-75-43',
      '00-34-56-75-43',
      '00-34-56-75-43',
    ];
  }

In my html:

<div class="row">
   <p id="p" style="font-size: 30px;">Máximo:<input style="margin-left: 10px; font-size: 30px;" type="text">
   <div *ngFor="let ubicacion of ubicaciones"><button>{{ ubicacion | slice:0:2 }}</button></div>
</div>

With the pipe slice I managed to get the first two digits of each location and put them in a button but now I need to remove the duplicates and order them from smallest to largest.

enter image description here

Help, please!

Upvotes: 0

Views: 56

Answers (2)

Dimitar
Dimitar

Reputation: 1180

This function will provide you with both sorted and "uniqued" array:

const uniqueSort = array => {
    return array.sort((a, b) => parseInt(a.slice(0,2)) > parseInt(b.slice(0, 2)) ? 1 : -1)
    .filter((elem, i, arr) => {
        return !i || elem != arr[i - 1];
    });
}

Essentially, it first sorts the array based on the first two digits(0 - 2), and then loops through the array to return a new array which contains elements which occur only once.

Given an input of:

[ '01-34-56-75-41', '10-34-22-75-53', '26-34-34-75-63', '00-89-56-75-43', '10-34-56-75-43', '20-33-56-75-43', '00-34-56-75-43', '00-34-56-75-43', '00-34-56-75-43', '00-34-56-75-43' ]

You will get an output of:

[ "00-89-56-75-43", "00-34-56-75-43", "01-34-56-75-41", "10-34-22-75-53", "10-34-56-75-43", "20-33-56-75-43", "26-34-34-75-63" ]

If you want to get only the elements given the first two numbers are unique, modify the filter function like so:

.filter((elem, i, arr) => {
    return !i || parseInt(elem.slice(0, 2)) != parseInt(arr[i - 1].slice(0, 2));
});

which will result in:

[ "00-89-56-75-43", "01-34-56-75-41", "10-34-22-75-53", "20-33-56-75-43", "26-34-34-75-63" ]

The difference is that here, the function checks for only the first two digits instead of the element (string) as a whole against its predecessor.

Upvotes: 2

Miriam
Miriam

Reputation: 59

Finally this worked for me:

Ts:

ubicaciones = [
    '01-34-56-75-41',
    '10-34-22-75-53',
    '26-34-34-75-63',
    '00-89-56-75-43',
    '10-34-56-75-43',
    '20-33-56-75-43',
    '00-34-56-75-43',
    '00-34-56-75-43',
    '00-34-56-75-43',
    '00-34-56-75-43',
    '21-34-56-75-43',
  ];

  newUbicaciones = Array.from(
    new Set(this.ubicaciones.map((item) => item.substring(0, 2)).sort())
  );

Html:

<div *ngFor="let item of newUbicaciones"><button>{{item}}</button></div>

Upvotes: 1

Related Questions