Angular 2 TypeScript how to find element in Array

Question

I have a Component and a Service:

Component:

export class WebUserProfileViewComponent {
    persons: Person [];
    personId: number;
    constructor( params: RouteParams, private personService: PersonService) {
          
        
           this.personId = params.get('id');
           this.persons =  this. personService.getPersons();
           console.log(this.personId);  
        }
}

Service:

@Injectable()
export class PersonService {
      getPersons(){
        var persons: Person[] = [
            {id: 1, firstName:'Hans', lastName:'Mustermann', email: '[email protected]', company:'Test', country:'DE'},
            {id: 2, firstName:'Muster', lastName:'Mustermann', email: '[email protected]', company:'test', country:'DE'},
            {id:3, firstName:'Thomas', lastName:'Mustermann', email: '[email protected]', company:'test', country:'DE'}
        ];
          
        return persons;
      }
}

I want to get the Person item with the ID ('personID'). The personID I get from Routeparams. For that I need the foreach loop? But I haven't found a solution for this.

You can find an element by Id like this persons.find(person => person.id === personId) — user5856396
– user5856396, Commented Jun 22, 2016 at 13:50
Possible duplicate of Find object by id in an array of JavaScript objects — Igor
– Igor, Commented Sep 26, 2019 at 15:47
Try always to get the data inside the ngOninit method lifecycle hook and not the constructor and try even static data to use observable with — Rebai Ahmed
– Rebai Ahmed, Commented Jul 14, 2021 at 0:14

logisima · Accepted Answer · 2017-12-28 12:44:32Z

322

You need to use method Array.filter:

this.persons =  this.personService.getPersons().filter(x => x.id == this.personId)[0];

or Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);

edited Dec 28, 2017 at 12:44

logisima

7,4781 gold badge20 silver badges31 bronze badges

answered Jun 22, 2016 at 13:50

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrei Zhytkevich Over a year ago

@SaravananNandhan, method this.personService.getPersons() returns undefined

antonioplacerda Over a year ago

@AndreiZhytkevich shouldn't we use triple equals?

Andrei Zhytkevich Over a year ago

@antonioplacerda, yes, that will do. However, for this question it is not too important.

Rizki Hadiaturrasyid Over a year ago

At first that code seems cryptic for me, but it might help to read "find(x => x.id == this.personId" as "find x, where x's id equals this person id" I don't know about other people, but for me this is much easier to remember.

Roby · Accepted Answer · 2021-01-15 08:05:08Z

97

Assume I have below array:

Skins[
    {Id: 1, Name: "oily skin"}, 
    {Id: 2, Name: "dry skin"}
];

If we want to get item with Id = 1 and Name = "oily skin", We'll try as below:

var skinName = skins.find(x=>x.Id == "1").Name;

The result will return the skinName is "Oily skin".

edited Jan 15, 2021 at 8:05

Roby

1541 silver badge13 bronze badges

answered Mar 8, 2018 at 10:48

Hai Dinh

1,5212 gold badges20 silver badges32 bronze badges

3 Comments

Toby Speight Over a year ago

Thank you for this code snippet, which might provide some limited short-term help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem, and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you've made.

rey_coder Over a year ago

How would you do this for an array initially empty then dynamically populated... there seems to be an issue while compiling.... the property e.g Id becomes unknown.

Hai Dinh Over a year ago

Hello @rey_coder, I think we should take a check if array not null before we implement to get array's element items. Like: testArray = []; testArrayItem = testArray.length>0? testArray.find(x=>x.Id== 1).Name: 'testArray null'; console.log(testArrayItem);

Nathan Beck · Accepted Answer · 2020-10-21 13:39:21Z

12

You could combine .find with arrow functions and destructuring. Take this example from MDN.

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

const result = inventory.find( ({ name }) => name === 'cherries' );

console.log(result) // { name: 'cherries', quantity: 5 }

edited Oct 21, 2020 at 13:39

answered Sep 26, 2019 at 15:26

Nathan Beck

1,20115 silver badges25 bronze badges

Comments

rharari · Accepted Answer · 2017-06-08 11:24:09Z

10

Transform the data structure to a map if you frequently use this search

mapPersons: Map<number, Person>;

// prepare the map - call once or when person array change
populateMap() : void {
    this.mapPersons = new Map();
    for (let o of this.personService.getPersons()) this.mapPersons.set(o.id, o);
}
getPerson(id: number) : Person {
    return this.mapPersons.get(id);
}

answered Jun 8, 2017 at 11:24

rharari

2013 silver badges6 bronze badges

Comments

Luca C. · Accepted Answer · 2018-02-20 10:50:30Z

6

from TypeScript you can use native JS array filter() method:

let filteredElements=array.filter(element => element.field == filterValue);

it returns an array with only matching elements from the original array (0, 1 or more)

Reference: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

answered Feb 20, 2018 at 10:50

Luca C.

12.7k2 gold badges89 silver badges83 bronze badges

Comments

Timtech · Accepted Answer · 2016-10-14 18:13:50Z

5

Use this code in your service:

return this.getReports(accessToken)
        .then(reports => reports.filter(report => report.id === id)[0]);

edited Oct 14, 2016 at 18:13

Timtech

1,2942 gold badges19 silver badges31 bronze badges

answered Oct 14, 2016 at 14:57

Anuj Shaubhari

591 silver badge1 bronze badge

Collectives™ on Stack Overflow

Angular 2 TypeScript how to find element in Array

6 Answers 6

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related