Screen a roster for shared elements with another roster

Within my dataset, I am working with a List of Objects that adhere to the following Model structure:

export class Animal{
  public aniId: number;
  public aniName: string;
}

export Class Zoo{
 public id: number;
 public name:string;
 public aniId: number;
}

The data includes a list of Zoo objects which each contain an associated Animal Id as illustrated below.

[{ "id": 4343, "name": "Canada", "aniId": 1000 }, { "id": 12121, "name": "China", "aniId": 78 }, { "id": 4143, "name": "Russia", "aniId": 58 } ] My inquiry is this: If provided with a list of Animal Objects, what method can I use to retrieve the corresponding Zoos that have these Animals?

For example: If given a list of Animals with Ids 1000 and 58, the expected output would be a list of Zoos with Ids 4343 and 4143.

Note: Although attempted using filters, I encountered difficulties achieving the desired result.

allZoo = this.zooList.filter(x=> x.aniId === this.animalList); <-- Issue here

Answer №1

If you want to get it functioning, simply adjust your filter logic like so:

filteredZoo = this.zooList.filter(zooAnimal => this.animalList.find(animal => animal.aniId === zooAnimal.aniId) !== null)

Essentially, this code snippet attempts to locate the corresponding animal in the animalList that has the same aniId as the animal in the zooList.

Answer №2

This solution proved to be effective for my situation.

export class Animal{
   aniId: number;
   aniName: string;
}

export class Zoo{
 public id: number;
 public name:string;
 public aniId: number;
}


let myZoo:Array<Zoo> =[{ "id": 4343, "name": "Canada", "aniId": 1000 }, { "id": 12121, "name": "China", "aniId": 78 }, { "id": 4143, "name": "Russia", "aniId": 58 } ] ;

let myAnimal:Array<Animal> =[{"aniId":1000,"aniName":"ani1"}];

let myZooList:Array<Zoo> = myZoo.filter(x => myAnimal.filter(y=> y.aniId===x.aniId).length>0);

console.log(myZooList);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Filtering an array of objects based on another array of objects in Angular2 through the use of pipes

I'm having trouble understanding how to use the angular pipe to filter an array of objects based on another array of objects. Currently, I have a pipe that filters based on a single argument. I am working with two arrays, array1 and array2, both cont ...

Pass information captured from Mat Dialog up to the main component

Looking for a way to pass true/false boolean data from a dialog box into the parent component without just console logging the result? You want to store it in a variable in the parent component for further use. Any suggestions on how to achieve this? This ...

How to dynamically add a route from an HTTP API to the app-routing.module.ts file in Angular 10

Struggling with an issue while working on Angular 10 version. Despite finding numerous solutions for older versions of Angular, I am still unable to resolve the issue. I consider myself a beginner in Angular as I try to create a website using an Angular c ...

Exploring the Concept of Template Element Recursion in Angular JS 2

In my Angular 2 project, I encountered a situation where I needed to iterate through ngFor based on child elements. My component should be able to render a list based on the input provided. Here is an example of the data structure: [ { name: 'ABC ...

Guide on effectively converting a table of tuples to an array of objects utility function (similar to zip) while preventing the merging of all values in typescript version 5.2.2

Almost there, but stuck on the final TS2322: Type TcolTuple[i] is not assignable to type string | number | symbol compiler error. Here's a nifty utility function called rowsToObjects() that many developers have probably come up with at some point, ...

The Material design paginator fails to function properly when used with dynamically generated tables

I have successfully implemented multiple tables with multiple columns using material table. However, I am encountering an issue when trying to paginate the results of each table. It appears that the pagination is not referencing each individual table, caus ...

Issues arising with utilizing Github for hosting Angular applications

After developing a site with Angular, everything was running smoothly on my local host. However, when I decided to host the site on GitHub, two errors appeared. You can access my site through this link: Here is a screenshot of the errors encountered [1]: ...

Challenge involving Angular for creating multiline innerHtml contentEditable feature

I am currently working on a project using Angular5 to create a unique type of "text-editor" utilizing div elements with the contenteditable property. This setup allows users to input plain text, but also enables them to select specific text and trigger an ...

Validate certain elements within a form group in a wizard

Within my 2-step wizard, there is a form group in the first step. When the next page button is clicked on the first step, I want to validate the elements in that form group. My questions are: 1 - Would it be more effective to use 2 separate forms in each ...

VS Code is throwing an Error TS7013, while Typescript remains unfazed

In my Typescript/Angular project, I have the following interface: export interface MyInterface { new (helper: MyInterfaceHelpers); } After compiling the project, no errors are shown by the Typescript compiler. However, VSCode highlights it with squiggl ...

Troubleshooting a Pulumi script in Azure using Typescript and encountering difficulties with function writing

My background is in using terraform, but now I am trying out Pulumi/typescript for the first time. In my codebase, I have two files - index.ts and blob.ts. The create function in blob.ts is responsible for creating a storage account, resource group, blob ...

The Angular project encounters a failure when attempting to run 'ng serve,' resulting in an emitted 'error' event on the worker

Resolved Issue - Update: It appears that the problem was due to an error in my CSS code: Previous: .title & .smaller { color: $dark-blue; font-family: "Roboto"; font-size: 20px; font-weight: 600; width: fit-content; margin: 0; ...

Waiting for asynchronous subscriptions with RxJS Subjects in TypeScript is essential for handling data streams efficiently

Imagine having two completely separate sections of code in two unrelated classes that are both listening to the same Observable from a service class. class MyService { private readonly subject = new Subject<any>(); public observe(): Observable&l ...

Angular's GET HTTP request has resulted in a 500 error message, specifically the Internal Server Error

Attempting to send a GET request to the server where only authenticated users can access a specific route ("/user") after logging in. However, even after a successful login, users are unable to gain access to the "/user" route. A middleware function named ...

Working with Array of Objects Within Another Array in Angular 6 Using Typescript

I'm currently working with an array of "food": "food": [ { "id": 11, "name": "Kabeljaufilet", "preis": 3.55, "art": "mit Fisch" }, { "id": 12, "name": "Spaghetti Bolognese", "preis": 3.85, "art": "mit Fleisch" }, { "id": 1 ...

Tips for generating an Angular material tree with dynamic information sourced from Angular services

I am completely new to Angular and I decided to test my skills by creating a tree structure. Here is the link to the example that inspired me. I attempted to replicate the same tree structure in my project using the provided data. Take a look at the screen ...

Encountering a problem when making a HTTPS GET request to a REST API using

I am currently running an Angular application that utilizes an external API to fetch country ISOs. However, I am encountering an error with the API since it uses HTTPS. Interestingly, when I implement a proxy in my Angular local environment by mapping /is ...

What could be causing the Checkbox [checked] to trigger multiple times across all options?

Currently, I am in the process of designing a form that includes a checkbox field allowing for multiple options to be selected. Given that this type of field will be used in various parts of my application, I have decided to implement a directive for thi ...

Inject parameter into MdDialog in Angular Material 2

I am currently utilizing Angular Material 2 and I have a requirement to display a dialog window using MdDialog that contains information about a user stored in Firebase. @Injectable() export class TweetService { dialogRef: MdDialogRef<TweetDialogCom ...

The key to subscribing only once to an element from AsyncSubject in the consumer pattern

When working with rxjs5, I encountered a situation where I needed to subscribe to an AsyncSubject multiple times, but only one subscriber should be able to receive the next() event. Any additional subscribers (if still active) should automatically receive ...