Angular 2 TypeScript como encontrar elemento na matriz

131

Eu tenho um componente e um serviço:

Componente:

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

Serviço:

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

Quero obter o item da pessoa com o ID ('personID'). O personID que recebo do Routeparam. Para isso eu preciso do loop foreach? Mas não encontrei uma solução para isso.

armadilha
fonte
11
Você pode encontrar um elemento por id como este persons.find (pessoa => person.id === personId)
tstellfe

Respostas:

255

Você precisa usar o método 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
fonte
2
@SaravananNandhan, método this.personService.getPersons()retorna #undefined
Andrei Zhytkevich
4
@AndreiZhytkevich não devemos usar iguais a triplos?
Antonioplacerda
@antonioplacerda, sim, isso serve. No entanto, para esta questão, não é muito importante.
Andrei Zhytkevich 7/04
1
No começo, esse código parece enigmático para mim, mas pode ajudar a ler "find (x => x.id == this.personId" como "find x, onde x é igual a id dessa pessoa" Eu não conheço outras as pessoas, mas para mim isso é muito mais fácil de lembrar.
Rizki Hadiaturrasyid
69

Suponha que eu tenho abaixo da matriz:

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

Se queremos obter o item com Id = 1e Name = "oily skin", tentaremos o seguinte:

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

O resultado retornará o nome da pele é "Pele oleosa".

Por favor, tente, obrigado e melhor consideração!

insira a descrição da imagem aqui

Hai Dinh
fonte
4
Obrigado por este snippet de código, que pode fornecer ajuda limitada a curto prazo. Uma explicação adequada melhoraria bastante seu valor a longo prazo, mostrando por que essa é uma boa solução para o problema e a tornaria mais útil para futuros leitores com outras perguntas semelhantes. Por favor edite sua resposta para adicionar alguma explicação, incluindo as suposições que você fez.
precisa
1
Como você faria isso para uma matriz inicialmente vazia e preenchida dinamicamente ... parece haver um problema ao compilar .... a propriedade, por exemplo, Id se torna desconhecida.
21138 rey_coder
Olá @rey_coder, acho que devemos fazer uma verificação se o array não for nulo antes de implementarmos para obter os itens de elemento do array. Como: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1). Nome: 'testArray null'; console.log (testArrayItem);
Hai Dinh
1
Oi @ hai-dinh, Isso resolveu o problema. Obrigado.
rey_coder
9

Transforme a estrutura de dados em um mapa, se você usa frequentemente essa pesquisa

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
fonte
8

Uma opção interessante ainda não mencionada é usar combinar .findcom funções de seta e desestruturação. Veja este exemplo do 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
fonte
4

Use este código em seu serviço:

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

Tente isto

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

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