Angular 2 TypeScript jak znaleźć element w Array

131

Mam komponent i usługę:

Składnik:

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

Usługa:

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

Chcę uzyskać pozycję osoby o identyfikatorze („personID”). Identyfikator osoby, który otrzymałem z Routeparam. Do tego potrzebuję pętli foreach? Ale nie znalazłem na to rozwiązania.

pułapka
źródło
11
Możesz znaleźć element według Id, taki jak ten people.find (person => person.id === personId)
tstellfe

Odpowiedzi:

256

Musisz użyć metody Array.filter:

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

lub Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);
Andrei Zhytkevich
źródło
2
@SaravananNandhan, metoda this.personService.getPersons()zwracaundefined
Andrei Zhytkevich
4
@AndreiZhytkevich czy nie powinniśmy używać potrójnych równych?
antonioplacerda
@antonioplacerda, tak, to wystarczy. Jednak w przypadku tego pytania nie jest to zbyt ważne.
Andrei Zhytkevich
1
Na początku ten kod wydaje mi się tajemniczy, ale może pomóc przeczytanie „find (x => x.id == this.personId”) jako „find x, gdzie identyfikator x jest równy identyfikatorowi tej osoby” Nie wiem o innych ludzi, ale dla mnie jest to o wiele łatwiejsze do zapamiętania.
Rizki Hadiaturrasyid
70

Załóżmy, że mam poniższą tablicę:

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

Jeśli chcemy otrzymać przedmiot z Id = 1i Name = "oily skin", postaramy się jak poniżej:

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

Wynik zwróci skinName to „Skóra tłusta”.

Spróbuj, dzięki i pozdrawiam!

wprowadź opis obrazu tutaj

Hai Dinh
źródło
4
Dziękujemy za ten fragment kodu, który może zapewnić ograniczoną krótkoterminową pomoc. Właściwe wyjaśnienie znacznie poprawiłoby jego długoterminową wartość, pokazując, dlaczego jest to dobre rozwiązanie problemu i uczyniłoby go bardziej użytecznym dla przyszłych czytelników z innymi, podobnymi pytaniami. Proszę edytować swoją odpowiedź dodać kilka wyjaśnień, w tym założeń już wykonanych.
Toby Speight
1
Jak byś to zrobił dla tablicy początkowo pustej, a następnie zapełnianej dynamicznie… wydaje się, że wystąpił problem podczas kompilacji… właściwość np. Id staje się nieznana.
rey_coder
Witaj @rey_coder, myślę, że powinniśmy sprawdzić, czy tablica nie jest pusta, zanim zaimplementujemy, aby uzyskać elementy elementów tablicy. Na przykład: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1) .Name: 'testArray null'; console.log (testArrayItem);
Hai Dinh,
1
Cześć @ hai-dinh. To rozwiązało problem. Dzięki.
rey_coder
9

Jeśli często korzystasz z tego wyszukiwania, przekształć strukturę danych w mapę

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
źródło
8

Sprytną opcją, o której jeszcze nie wspomniano, jest użycie kombinacji .findz funkcjami strzałkowymi i destrukturyzacją. Weź ten przykład z 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
źródło
4

Użyj tego kodu w swojej usłudze:

return this.getReports(accessToken)
        .then(reports => reports.filter(report => report.id === id)[0]);
Anuj Shaubhari
źródło
1

Spróbuj tego

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

      console.log('Description : ', val );
ammad khan
źródło