Angular 2 TypeScript comment trouver un élément dans un tableau

Question

Je possède un composant et un service :

Composant :

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

Je veux obtenir l'élément Personne avec l'ID (« personID »). Le personID que j'obtiens de Routeparam. Pour cela, j'ai besoin de la boucle foreach ? Mais je n'ai pas trouvé de solution pour ça.

Answer 1

Vous devez utiliser la méthode Array.filter:

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

ou Array.find

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

Answer 2

Supposons que j'ai le tableau suivant :

Skins[
    {Id: 1, Nom: "peau grasse"}, 
    {Id: 2, Nom: "peau sèche"}
];

Si nous voulons obtenir l'élément avec Id = 1 et Nom = "peau grasse", nous essayerons comme suit :

var nomPeau = skins.find(x=>x.Id == "1").Nom;

Le résultat retournera que le nom de la peau est "peau grasse".

Answer 3

Transformez la structure de données en une map si vous utilisez fréquemment cette recherche

mapPersons: Map;

// préparer la map - appeler une fois ou lorsque le tableau de personnes 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);
}

Answer 4

De TypeScript, vous pouvez utiliser la méthode native JS array filter() :

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

elle renvoie un tableau ne contenant que les éléments correspondants du tableau d'origine (0, 1 ou plusieurs)

Référence : https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Answer 5

Utilisez ce code dans votre service :

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