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'). Персональный идентификатор, который я получаю от Routeparam. Для этого мне нужен цикл foreach? Но я не нашел для этого решения.


11
Вы можете найти элемент по идентификатору, например, 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, да, подойдет. Однако для этого вопроса это не так уж важно.
Андрей Житкевич 07

1
Сначала этот код кажется мне загадочным, но он может помочь читать «find (x => x.id == this.personId» как «найти 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
Спасибо за этот фрагмент кода, который может оказать некоторую краткосрочную помощь. Правильное объяснение значительно повысило бы его ценность в долгосрочной перспективе, показав, почему это хорошее решение проблемы, и сделало бы его более полезным для будущих читателей с другими похожими вопросами. Пожалуйста , измените свой ответ , чтобы добавить некоторые объяснения, в том числе допущений , которые вы сделали.
Тоби Спейт

1
Как бы вы сделали это для массива, изначально пустого, а затем динамически заполняемого ... похоже, возникла проблема при компиляции .... свойство, например Id, становится неизвестным.
rey_coder

Привет @rey_coder, я думаю, мы должны проверить, не равен ли массив нулю, прежде чем реализовывать получение элементов элементов массива. Например: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1). Имя: 'testArray null'; console.log (testArrayItem);
Hai Dinh

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 }



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.