How to filter results based on keys in other object with Angular?

Question

I have an object say it's called this.car and it looks like this and gets displayed on a page:

this.car = {
    id: 1,
    title: "F40",
    make: ferrari,
    color: red,
    category: fast
};

I then have an array of search results looking for cars, which return from an endpoint which might look like this:

let uri = `fast-cars/search?make=${make}&color=${color}&title=${title}`;

I might be on a page displaying information about the above car. if I search for cars via the searchable autocomplete drop-down I am using for search, I don't want the above car object to display in the returned list. But currently, the title is still showing in the options array.

if my results array looks like this:

this.results = [
    {
      id: 1,
      title: "F40",
      make: ferrari,
      color: red,
      category: fast
    },
    {
      id: 2,
      title: "911",
      make: porsche,
      color: black,
      category: fast
    },
    {
      id: 3,
      title: "Focus",
      make: ford,
      color: yellow,
      category: slow
    },
    {
      id: 4,
      title: "T-Series",
      make: Bentley,
      color: grey,
      category: fast
    }
];

I then want to filter the results against values in the first object, but my filter isn't working. ie id: 1 should be removed from the drop-down.

I then use this method which is being called like this elsewhere on subscribing to results:

results => {
  if (results) {
    this.results = results;
    this.filterSearchResults(this.results, this.car);
  }
}

I'm not brilliant with using filters on multiple values, so have hit a block in terms of getting this to work. Can anyone see what I am doing wrong?

Answer 1

This will remove an object from the array if the car object has the same properties (ie title, make and color) as an object already present in the array:

this.results.filter(
   e => e.title !== car.title && e.make !== car.make && e.color !== car.color
);

---

If you want to just check if the object already exists then you can use some which will return a boolean value indicating whether the element exists or not:

return this.results.some(
   e => e.title === car.title && e.make === car.make && e.color === car.color
);

Answer 2

The issue is in your conditional logic, fixed below. You needed

(result["color"] === car["color"] &&
result["make"] === car["make"] &&
result["title"] === car["title"])

Not

result["color"] && result["make"] && result["title"] ===
car["color"] && car["make"] && car["title"]

 const car = { id: 1, title: "F40", make: 'ferrari', color: 'red', category: 'fast' }; const results = [ { id: 1, title: "F40", make: 'ferrari', color: 'red', category: 'fast' }, { id: 2, title: "911", make: 'porsche', color: 'black', category: 'fast' }, { id: 3, title: "Focus", make: 'ford', color: 'yellow', category: 'slow' }, { id: 4, title: "T-Series", make: 'Bentley', color: 'grey', category: 'fast' } ]; console.log(results.filter(result => (result["color"] === car["color"] && result["make"] === car["make"] && result["title"] === car["title"]) ));

Answer 3

I guess you just want to remove the car that is already shown, so here you are with a simple filter method.Now results containe the proper cars.

 car = { id: 1, title: "F40", make: "ferrari", color: "red", category: "fast" }; results = [ { id: 1, title: "F40", make: "ferrari", color: "red", category: "fast" }, { id: 2, title: "911", make: "porsche", color: "black", category: "fast" }, { id: 3, title: "Focus", make: "ford", color: "yellow", category: "slow" }, { id: 4, title: "T-Series", make: "Bentley", color: "grey", category: "fast" } ]; this.results= this.results.filter(listedcar=> listedcar.id.== this.car;id). console.log(this.results)

Answer 4

If I have understood your question correctly you would like to filter out this.car in your this.results and display the remaining.

filterSearchResults() {
  var filteredList = this.results.filter(cars => cars.id !== this.car.id);
  // or have another global object like this.filteredCars
  console.log(filteredList);
};

Since this.car and this.results are global objects, you can use them directly in the function, no need to pass.