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: '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 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.


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

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


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

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 }


4

Utilisez ce code dans votre service:

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

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 );
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.