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

131

J'ai 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);  
        }
}

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

Je souhaite obtenir l'élément de personne avec l'identifiant ('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 cela.

prendre au piège
la source
11
Vous pouvez trouver un élément par identifiant comme celui-ci persons.find (person => person.id === personId)
tstellfe

Réponses:

255

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);
Andrei Zhytkevich
la source
2
@SaravananNandhan, la méthode this.personService.getPersons()retourneundefined
Andrei Zhytkevich
4
@AndreiZhytkevich ne devrions-nous pas utiliser des triples égaux?
antonioplacerda
@antonioplacerda, oui, cela fera l'affaire. Cependant, pour cette question, ce n'est pas trop important.
Andrei Zhytkevich
1
Au début, ce code me semble énigmatique, mais il peut être utile de lire "find (x => x.id == this.personId" comme "find x, où l'id de x est égal à cet id de personne" Je ne sais pas pour les autres les gens, mais pour moi, c'est beaucoup plus facile à retenir.
Rizki Hadiaturrasyid
69

Supposons que j'ai le tableau ci-dessous:

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

Si nous voulons obtenir un article avec Id = 1et Name = "oily skin", nous essaierons comme ci-dessous:

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

Le résultat renverra le skinName est "Peau grasse".

S'il vous plaît, essayez, merci et meilleures salutations!

entrez la description de l'image ici

Hai Dinh
la source
4
Merci pour cet extrait de code, qui pourrait fournir une aide limitée à court terme. Une explication appropriée améliorerait considérablement sa valeur à long terme en montrant pourquoi c'est une bonne solution au problème, et la rendrait plus utile aux futurs lecteurs avec d'autres questions similaires. Veuillez modifier votre réponse pour ajouter des explications, y compris les hypothèses que vous avez formulées.
Toby Speight
1
Comment feriez-vous cela pour un tableau initialement vide puis peuplé dynamiquement ... il semble y avoir un problème lors de la compilation .... la propriété, par exemple, Id devient inconnue.
rey_coder
Bonjour @rey_coder, je pense que nous devrions vérifier si le tableau n'est pas nul avant de l'implémenter pour obtenir les éléments d'élément du tableau. Comme: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1) .Name: 'testArray null'; console.log (testArrayItem);
Hai Dinh
1
Salut @ hai-dinh, Cela a réglé le problème. Merci.
rey_coder
9

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

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);
}
rharari
la source
8

Une option intéressante non encore mentionnée est d'utiliser combiner .findavec les fonctions fléchées et la déstructuration. Prenons cet exemple de 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 }
Nathan Beck
la source
4

Utilisez ce code dans votre service:

return this.getReports(accessToken)
        .then(reports => reports.filter(report => report.id === id)[0]);
Anuj Shaubhari
la source
1

Essaye ça

          let val = this.SurveysList.filter(xi => {
        if (xi.id == parseInt(this.apiId ? '0' : this.apiId))
          return xi.Description;
      })

      console.log('Description : ', val );
ammad khan
la source