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: 'mustermann@test.com', company:'Test', country:'DE'},
            {id: 2, firstName:'Muster', lastName:'Mustermann', email: 'mustermann@test.com', company:'test', country:'DE'},
            {id:3, firstName:'Thomas', lastName:'Mustermann', email: 'mustermannt@tesrt.com', 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) — , Jun 22 '16 at 13:50
Possible duplicate of [Find object by id in an array of JavaScript objects](https://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects) — Igor, Sep 26 '19 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, Jul 14 '21 at 00:14

score 318 · Answer 1 · edited Dec 28 '17 at 12:44

318

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 '17 at 12:44

logisima

7,340
1
18
31

answered Jun 22 '16 at 13:50

Andrei Zhytkevich

8,039
2
31
45

3

@SaravananNandhan, method `this.personService.getPersons()` returns `undefined` – Andrei Zhytkevich Dec 18 '17 at 13:51
5

@AndreiZhytkevich shouldn't we use triple equals? – antonioplacerda Apr 06 '18 at 11:58
@antonioplacerda, yes, that will do. However, for this question it is not too important. – Andrei Zhytkevich Apr 07 '18 at 15:06
3

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. – Rizki Hadiaturrasyid Apr 24 '18 at 06:09

score 97 · Answer 2 · edited Jan 15 '21 at 08:05

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 '21 at 08:05

Roby

145
1
12

answered Mar 08 '18 at 10:48

Hai Dinh

1,499
2
17
30

4

Thank you for this code snippet, which might provide some limited short-term help. A proper explanation [would greatly improve](//meta.stackexchange.com/q/114762) 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. – Toby Speight Mar 08 '18 at 11:44
1

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. – rey_coder Jul 15 '18 at 16:28
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); – Hai Dinh Jul 17 '18 at 01:51
1

Hi @hai-dinh, That sorted the issue. Thanks. – rey_coder Jul 17 '18 at 10:41

Nathan Beck · Answer 3 · 2020-10-21T13:39:21.557

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 '20 at 13:39

answered Sep 26 '19 at 15:26

Nathan Beck

1,152
14
23

score 10 · Answer 4 · answered Jun 08 '17 at 11:24

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);
}

score 6 · Answer 5 · answered Feb 20 '18 at 10:50

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

score 5 · Answer 6 · edited Oct 14 '16 at 18:13

5

Use this code in your service:

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

edited Oct 14 '16 at 18:13

Timtech

1,224
2
19
30

answered Oct 14 '16 at 14:57

Anuj Shaubhari

59
1
1

Angular 2 TypeScript how to find element in Array

6 Answers6

Linked