Angular 2 TypeScript cómo encontrar el elemento en la matriz

131

Tengo un componente y un servicio:

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

Servicio:

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

Quiero obtener el elemento de persona con el Id ('personID'). La persona que obtengo de Routeparam. Para eso necesito el bucle foreach? Pero no he encontrado una solución para esto.

trampa
fuente
11
Puede encontrar un elemento por Id como este persons.find (person => person.id === personId)
tstellfe

Respuestas:

255

Necesitas usar el método Array.filter:

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

o Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);
Andrei Zhytkevich
fuente
2
@SaravananNandhan, el método this.personService.getPersons()regresaundefined
Andrei Zhytkevich
44
@AndreiZhytkevich ¿no deberíamos usar triples iguales?
antonioplacerda
@antonioplacerda, sí, eso servirá. Sin embargo, para esta pregunta no es demasiado importante.
Andrei Zhytkevich
1
Al principio, ese código me parece críptico, pero podría ayudar leer "find (x => x.id == this.personId" como "find x, donde la identificación de x es igual a la identificación de esta persona" No sé sobre otra personas, pero para mí esto es mucho más fácil de recordar.
Rizki Hadiaturrasyid
69

Supongamos que tengo debajo de la matriz:

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

Si queremos obtener un artículo con Id = 1y Name = "oily skin", lo intentaremos de la siguiente manera:

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

El resultado devolverá el skinName es "Skin graso".

Por favor, intente, gracias y un saludo!

ingrese la descripción de la imagen aquí

Hai Dinh
fuente
44
Gracias por este fragmento de código, que podría proporcionar una ayuda limitada a corto plazo. Una explicación adecuada mejoraría en gran medida su valor a largo plazo al mostrar por qué esta es una buena solución al problema y lo haría más útil para futuros lectores con otras preguntas similares. Por favor, editar su respuesta a añadir un poco de explicación, incluyendo los supuestos realizados.
Toby Speight
1
¿Cómo haría esto para una matriz inicialmente vacía y luego poblada dinámicamente ... parece haber un problema al compilar ... la propiedad, por ejemplo, Id, se desconoce.
rey_coder
Hola @rey_coder, creo que deberíamos verificar si la matriz no es nula antes de implementarla para obtener los elementos de la matriz. Me gusta: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1) .Name: 'testArray null'; console.log (testArrayItem);
Hai Dinh
1
Hola @ hai-dinh, Eso solucionó el problema. Gracias.
rey_coder
9

Transforme la estructura de datos en un mapa si usa esta búsqueda con frecuencia

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

Una buena opción que aún no se menciona es utilizar la combinación .findcon las funciones de flecha y la desestructuración. Tome este ejemplo 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
fuente
4

Use este código en su servicio:

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

Prueba esto

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

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