Angular 2 TypeScript як знайти елемент у масиві


131

У мене є компонент та послуга:

Компонент:

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

Сервіс:

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

Я хочу отримати елемент Person з ідентифікатором ('personID'). PersonID я отримую від Routeparam. Для цього мені потрібна петля foreach? Але я не знайшов рішення для цього.


11
Ви можете знайти елемент за Id на зразок цього person.find (person => person.id === personId)
tstellfe

Відповіді:


255

Вам потрібно використовувати метод Array.filter:

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

або Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);

2
@SaravananNandhan, метод this.personService.getPersons()повертаєтьсяundefined
Андрій Житкевич

4
@AndreiZhytkevich чи не слід використовувати потрійні рівні?
antonioplacerda

@antonioplacerda, так, це зробить. Однак для цього питання це не надто важливо.
Андрій Житкевич

1
Спочатку цей код мені здається загадковим, але він може допомогти прочитати "find (x => x.id == this.personId" як "find x, де ідентифікатор x дорівнює цьому ідентифікатору особи" Я не знаю про інших люди, але мені це набагато простіше запам’ятати
Rizki Hadiaturrasyid

69

Припустимо, у мене є масив нижче:

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

Якщо ми хочемо отримати товар із Id = 1і Name = "oily skin", ми спробуємо як нижче:

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

Результат поверне skinName - "Жирна шкіра".

Спробуйте, дякую і з найкращими побажаннями!

введіть тут опис зображення


4
Дякуємо за цей фрагмент коду, який може надати деяку короткочасну допомогу. Правильне пояснення значно покращило б його довгострокове значення, показавши, чому це хороше рішення проблеми, та зробило б кориснішим майбутнім читачам інші подібні питання. Будь ласка, відредагуйте свою відповідь, щоб додати пояснення, включаючи зроблені вами припущення.
Toby Speight

1
Як би ви це зробили для масиву, спочатку порожнього, а потім динамічно заповненого ..., здається, виникає проблема під час компіляції .... властивість, наприклад, Id стає невідомою.
rey_coder

Привіт @rey_coder, я думаю, нам слід перевірити, чи масив не є нульовим, перш ніж ми будемо реалізовувати, щоб отримати елементи елементів масиву. Як: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1) .Name: 'testArray null'; console.log (testArrayItem);
Хай Дінь

1
Привіт @ hai-dinh, Це сортувало питання. Дякую.
rey_coder

9

Перетворіть структуру даних на карту, якщо ви часто використовуєте цей пошук

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

Акуратний варіант, про який ще не було сказано, - використовувати комбінувати .findз функціями стрілки та руйнування. Візьмемо цей приклад з 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

Використовуйте цей код у своїй службі:

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

1

Спробуйте це

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

      console.log('Description : ', val );
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.