Exploring Angular 6: Searching for intricate objects within a list and extracting names from a reference table

I am looking to search a list of complex objects.

Here is an example of how my list is structured:

  private employees: Employee[] = [
    {
      name: 'Mary Jay',
      departmentsList: [1, 2, 3], //these are the IDs of departments from the list below
      emailList: [ '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbded6cb8afbdcdad6d2d795d8d4d6">[email protected]</a>', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfaaa2bffd8fa8a2aea6a3e1aca0a2">[email protected]</a>', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c0c8d596e5c2c8c4ccc98bc6cac8">[email protected]</a>' ]
    }
  ];


   private departments: Department[] = [
    { id: 1, name: 'dep1' },
    { id: 2, name: 'dep2' },
    { id: 3, name: 'dep3' },
    { id: 4, name: 'dep4' },
    { id: 5, name: 'dep5' },
    { id: 6, name: 'dep6' }
  ];

My goal is to create a search filter based on department names and emails.

Does anyone have any suggestions on how I can extract department names by iterating through this list of complex objects? This would allow me to search through the lists of emails and departments using their names.

Thank you!

typescript

Answer №1

officeDepartments = [
{ id: 1, name: 'department1' },
{ id: 2, name: 'department2' },
{ id: 3, name: 'department3' },
{ id: 4, name: 'department4' },
{ id: 5, name: 'department5' },
{ id: 6, name: 'department6' }
]
const inputValue = 'department';
const allDepartmentNames = officeDepartments.map(dep => dep.name);
const searchResult = allDepartmentNames.filter(name => name.includes(inputValue));

console.log(searchResult)

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

Converting JS carousel to TS for showcasing multiple items

I am currently working on integrating a bootstrap carousel into my Angular project and I need to convert my JavaScript file to a TypeScript file. As someone who is new to this, I'm unsure of the process for converting and implementing it in a .ts file ...

javascriptangulartypescript

Encountering a hitch in loading Typescript modules

I'm attempting to utilize Typescript modules, but I'm encountering issues with loading them properly. Each time I try to import the module, I receive the following error message in my JS file: JavaScript runtime error: 'exports' is und ...

typescript

How can I position ports on the right side of a graph element in JointJS?

I'm in the process of developing an Angular application that allows users to dynamically create graphs. Currently, I am working on a function that adds ports to vertices and I want the user to be able to select the position of the port (right, left, t ...

typescriptgraphportjointjs

Creating formGroups dynamically within an ngFor loop inside an accordion

I am facing a challenge with an accordion feature that generates a specified number of sections x based on user input. Here is an example: https://i.sstatic.net/QjmkW.png After creating the sections, I need to load employee information into each section ...

angulartypescriptionic-framework

Retrieve the current step index in Angular Material Design Stepper

In my endeavors to retrieve the selected step within a component utilizing Angular Material Design stepper, I am encountering some issues. My current approach involves using the selectedIndex property, but it consistently returns "1" instead of the desire ...

angulartypescriptangular-material

Angular transforming full names to initials within an avatar

What is the best way to convert names into initials and place them inside circular icons, like shown in the screenshot below? I already have code that converts the initials, but how do we create and add them inside the icons? The maximum number of icons di ...

angulartypescript

Add the onclick() functionality to a personalized Angular 4 directive

I'm facing an issue with accessing the style of a button in my directive. I want to add a margin-left property to the button using an onclick() function in the directive. However, it doesn't seem to be working. Strangely, setting the CSS from the ...

javascriptcssangulartypescriptangularjs-directive

Comparing values between two JSON objects in Angular 8: A guide

I need to compare the values of two objects, obj1 and obj2, by ignoring keys that are missing in either object. If all key-value pairs are equal, return false; otherwise, return true. For example: If 'id' is present in obj1 but not in obj2, it s ...

javascriptangulartypescriptangular8

How to ensure Angular mat-button-toggle elements are perfectly aligned within their respective groups

https://i.stack.imgur.com/Wjtn5.png Hello there, I'm trying to make the numbers in the first group match the style of the second group (noche, mañana...). I've set both the group and individual element width to 100%, but the numbers beyond 22 ...

htmlcssangulartypescriptangular-material

What prevents me from extending an Express Request Type?

My current code looks like this: import { Request, Response, NextFunction } from 'express'; interface IUserRequest extends Request { user: User; } async use(req: IUserRequest, res: Response, next: NextFunction) { const apiKey: string = ...

javascripttypescriptexpress

Typescript's Array extension causes issues with constructors

During my experimentation with TypeScript, I encountered an interesting behavior: class ExtArray<U> extends Array<U> { constructor(...args : U[]) { super(...args); } public contains(element : U) : boolean { var i ...

arraysconstructortypescript

The issue with Angular2 ng bootstrap datepicker minDate functionality defect

Error message when using ng bootstrap with minDate: "minDate value must be or return a formatted date" HTML Component: <div class="input-group"> <input class="form-control" name="date_of_birth" type="text" ngbDatepicker #d="ngbDatepicker" id ...

angulartypescriptng-bootstrap

Restrict the number of API calls in nestjs

Is there a way to effectively limit the rate of my nestjs api calls? So far, I have explored various packages, but they all seem to limit based on the user's IP address. Do you happen to know of any package that can achieve rate limiting using the us ...

typescriptnestjsrate-limiting

Convert an array of strings to my custom array type in Angular

I have a list of different statuses Here is an example of it: export enum InvoiceStatus { Created = 1, Pending = 2, Approved = 3, Rejected = 4, Paid = 5, Deleted = 6, PreparingPayment = 7 } My goal is to convert it into an ar ...

javascriptangulartypescript

There seems to be a lack of information appearing on the table

I decided to challenge myself by creating a simple test project to dive into Angular concepts such as CRUD functions, utilizing ngFor, and understanding HttpClient methods (specifically get and post). After creating a Firebase database with an API key and ...

htmlangulartypescriptfirebaseangular-httpclient

Is there a way to make Typescript accept dot notation?

Is there a way to suppress the compile time error in Typescript when using dot notation to access a property that the compiler doesn't know about? Even though using bracket notation works, dot notation would be much more readable in my specific case. ...

angulartypescriptjasmine

What methods does React Router use to extract typed parameters from path strings?

(This question is about understanding functionality, not asking for a step-by-step guide) While using React Router, I noticed that Vscode IntelliSense can offer strongly-typed suggestions when I input parameters in a route like this: <Route path=&apos ...

javascripttypescriptvisual-studio-codereact-routerintellisense

In Angular with rxjs, make sure the response is set to null if the json file cannot be found during an http.get request

When working on my Angular app, I often retrieve data from a static JSON file like this: @Injectable() export class ConfigService { constructor(private http: HttpClient) { } getData() { this.http.get('/assets/myfile.json').subscribe(da ...

angulartypescriptecmascript-6rxjs

Saving asynchronous data in Ionic 3: The ultimate guide

I'm working on a news app where I retrieve data from my Json API using the Http Client. I want to ensure that my data remains stored even if there is no internet connection or if the user closes/restarts the app. Currently, I retrieve my data in an o ...

angulartypescriptasynchronousionic-frameworklocal-storage

Is it possible to selectively mock certain components of an external module using jest?

I am totally new to using Jest, especially in regards to unit tests, and I am struggling to write a test for a specific scenario. I know that you can mock an external module like this.. jest.mock('@organisation/library', () => ({ Database: j ...

javascripttypescriptjestjs