What is the best way to retrieve distinct objects based on LocId across all locations?

Question

What is the best way to retrieve distinct objects based on LocId across all locations?

Encountering an issue while working on Angular 7: unable to return distinct or unique objects based on LocId.

The goal is to retrieve unique objects from an array of objects containing all Locations.

allLocations:any[]=[];
ngOnInit()
{

this.locationsService.allLocations.forEach(loc => {
      let d = this.locationsService.allLocations.findIndex(x => x.Locid == loc.Locid);
      if (d !== -1) {
        this.locationsService.allLocations.splice(d, 1);
}

The HTML component code is as follows:

<tr *ngFor="let l of locationsService.allLocations">
                <td class="z2-boxstyle1-td-colcontent">
                  <div> {{l.Locid}} </div>
                </td>
</tr>

The current result of the array is:

[
{"Locid":40903,"GPS1":"42.5913974,-71.3277873","CompanyID":1000339},
{"Locid":40900,"GPS1":"42.588432,-71.31720900000001","CompanyID":1000339}
{"Locid":40900,"GPS1":"42.588432,-71.31720900000001","CompanyID":1000339}
]

Since the LocId is the same for two objects, I need to return only one distinct object as below:

Expected Result :

[
{"Locid":40903,"GPS1":"42.5913974,-71.3277873","CompanyID":1000339},
{"Locid":40900,"GPS1":"42.588432,-71.31720900000001","CompanyID":1000339}
]

javascript typescript angular7 angular-directive angular-components

Answer 1

Answer №1

The main issue here is that the sequence of elements in the array changes when you use .splice.

It seems like your goal is to avoid duplicating values.

You could achieve this by using .reduce like so:

var result = this.locationsService.allLocations.reduce((accumulator, value) => {
  if (!accumulator[value.Locid]) {
    accumulator[value.Locid] = value;
  }
return accumulator
},{});

console.log(Object.values(result));

Another approach is to create an empty list and add values from

this.locationsService.allLocations

only if the Locid is not already present in the list. (2-passes)

Alternatively, you can also utilize .filter and .findIndex for this task. (2-passes)

Overall, I would advise against these methods as they require two passes, whereas using .reduce with a single pass would be more efficient.

Answer 2

The main issue here is that the sequence of elements in the array changes when you use .splice.

It seems like your goal is to avoid duplicating values.

You could achieve this by using .reduce like so:

var result = this.locationsService.allLocations.reduce((accumulator, value) => {
  if (!accumulator[value.Locid]) {
    accumulator[value.Locid] = value;
  }
return accumulator
},{});

console.log(Object.values(result));

Another approach is to create an empty list and add values from

this.locationsService.allLocations

only if the Locid is not already present in the list. (2-passes)

Alternatively, you can also utilize .filter and .findIndex for this task. (2-passes)

Overall, I would advise against these methods as they require two passes, whereas using .reduce with a single pass would be more efficient.

Answer 3

Answer №2

Filter the array by Locid

const uniqueArr = arr.filter((element, index, self) =>
  index === self.findIndex((t) => (t.Locid === element.Locid)));

console.log(uniqueArr);

Answer 4

Filter the array by Locid

const uniqueArr = arr.filter((element, index, self) =>
  index === self.findIndex((t) => (t.Locid === element.Locid)));

console.log(uniqueArr);

What is the best way to retrieve distinct objects based on LocId across all locations?

Answer №1

Answer №2

Similar questions

Is it possible to verify if a string in JavaScript contains both numbers and special characters?

Tips for effectively using the JQuery animate function

Learn how to keep sessionStorage state synchronized across ReactJS components

What is the equivalent of Buffer.from(<string>, 'hex') in Python?

Including a hyperlink in VUE Bootstrap for seamless user navigation

JavaScript fails to display image slideshows upon loading

"Implementing x2js in your project on-the-fly with the help

The function form.parse() in node.js is always overlooked

Is there a way for me to access the response from the PHP file I'm calling with Ajax?

Creating dynamic keys using Typescript and JSON data format

When clicked, you will be redirected to the details page

How to tell if one mesh is contained within another in Three.js

Iterating through a jQuery function to increment value

How can we transform the `toUSD(amount)` function into a prototype function?

Tips for showcasing information entered into text fields within a single container within another container

Yet another error: TS2511 - Unable to instantiate an abstract class

The 'flatMap' property is not found on the 'string[]' data type. This issue is not related to ES2019

Difficulty encountered when applying date filtering on a specific filter in the MUI-DataGrid

Tips for resolving issues with the carousel container in bootstrap?

The link in Next.js is updating the URL but the page is not refreshing