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

Id( 'personID')のPersonアイテムを取得したい。Routeparamから取得するpersonID。そのためにforeachループが必要ですか?しかし、私はこれに対する解決策を見つけていません。


11
次のようなIDで要素を見つけることができます。persons.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
Andrei Zhytkevich '18 / 12/18

4
@AndreiZhytkevichは、トリプルのイコールを使用すべきではありませんか?
antonioplacerda

@antonioplacerda、そうです。ただし、この質問ではそれほど重要ではありません。
Andrei Zhytkevich

1
最初はそのコードは暗号のように見えますが、「find(x => x.id == this.personId」を「find x、ここでxのIDはこの人物のIDと等しい」と読むと役立つかもしれません。他のことはわかりません人々、しかし私にとってこれははるかに覚えやすい
Rizki Hadiaturrasyid

69

以下の配列があると仮定します:

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

Id = 1and Name = "oily skin"でアイテムを取得したい場合は、以下のように試してみます:

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

結果は、skinNameが "Oily skin"を返します。

どうぞお試しください、よろしくお願いします!

ここに画像の説明を入力してください


4
このコードスニペットをありがとうございます。このコードスニペットは、短期間の限定的なヘルプを提供する場合があります。適切な説明は、なぜこれが問題の優れた解決策であるを示すことにより、長期的な価値を大幅に改善し、他の同様の質問を持つ将来の読者にとってより有用になります。答えを編集して、仮定を含めて説明を追加してください。
Toby Speight 2018年

1
最初は空で動的に入力された配列に対してこれをどのように実行しますか?コンパイル中に問題があるようです...プロパティ(IDなど)が不明になります。
rey_coder 2018

こんにちは@rey_coderです。配列の要素項目を取得するために実装する前に、配列がnullでないかどうかを確認する必要があると思います。例: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 );
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.