exisitingプロパティから新しい配列を作成します

Question

私は、次のようなオブジェクトがあります。

export var PROJECT: any = { 
    id: "1", 
    name: "Hunkemoller", 
    teammembers: [ 
     { 
      id: 1, 
      name: "Sarah Johnson", 
      firstname: "Sarah", 
      role: "Manager" 
     }, 
     { 
      id: 2, 
      name: "Christian Johnson", 
      firstname: "Christian", 
      role: "Employee" 
     } 

など

は私がアプリを作ってるんだし、あなたが検索できるので、私は、それに検索要素を追加したいです異なるチームメンバーのために。私はすべてのチームメンバーの中からすべてのプロパティ '名前'を初期化したいと思っています。これは、フィルタリングする必要がある唯一のものです。

私は2つの方法を考えてきました：

1. がそれにプロジェクトの名前のみ> teammembers で新しい配列を作成します。
2. 名前を初期化するだけです。しかし、私はこれで成功していません。

正しい選択をして成功する方法を教えてもらえますか？ 新しいアレイを既存のものから外す方法は今でもありません。私はこのような何かを考えていた：

var teamMembers = project.teammembers.name(); 

をしかし、私はちょうどオブジェクトのうち、nameプロパティを使用することができれば離れて、そのオプションから、それが最善でしょう。

私は、次のしている私のtypescriptファイルで

<ion-searchbar (ionInput)="getTeammembers($event)" [(ngModel)]="searchQuery"></ion-searchbar> 
<ion-list> 
    <ion-item *ngFor="let teammember of project.teammembers"> 
     {{ teammember.name }} 
    </ion-item> 
</ion-list> 

（私は角度イオン2月2日を使用しています）ここまでだった：

initializeTeammembers() { 
    this.project.teammembers; 
    } 

    getTeammembers(ev) { 
    // reset teammembers back to all of the teammembers 
    this.initializeTeammembers(); 

    // set val to the value of the searcbar 
    let val = ev.target.value; 

    // if the value is empty string, don't filter teammembers 
    if (val && val.trim() != '') { 
     this.project.teammembers.name = this.project.teammembers.name.filter((teammember) => { 
     return (teammember.toLowerCase().indexOf(val.toLowerCase()) > -1); 
     }) 
    } 
    } 

しかし、それは動作しません。私はエラーが表示されます：未定義のプロパティ 'フィルタ'を読み取ることができません。

私を助けてくれる人がいますか？前もって感謝します。

Answer 1

あなたはArray.prototype.mapを使用して、新しい別のアレイを作成することができます。

var teamMembers = project.teammembers.map(function(item){ return item.name }); 

var project = { 
 
    id: "1", 
 
    name: "Hunkemoller", 
 
    teammembers: [ 
 
     { 
 
      id: 1, 
 
      name: "Sarah Johnson", 
 
      firstname: "Sarah", 
 
      role: "Manager" 
 
     }, 
 
     { 
 
      id: 2, 
 
      name: "Christian Johnson", 
 
      firstname: "Christian", 
 
      role: "Employee" 
 
     } 
 
     ] 
 
    }; 
 

 
console.log(project.teammembers.map(function(item){ return item.name }));

良い方法はArray.prototype.filterを使用して結果をフィルタリングしますpipeを作成することです。

Answer 2

それは... SO

this.project.teammembers.name = this.project.teammembers.filter(function(el) { 
    return (el.name === val.toLowerCase()); 
}).map(function(el) { 
    return el.firstname; 
}).sort(); 

this.project.teammembers.nameすべきではないとだけthis.project.teammembers、その後、フィルタ

if (val && val.trim() != '') { 
     this.project.teammembers.name = 
        this.project.teammembers.filter((teammember) => { 
     return (teammember.name.toLowerCase().indexOf(val.toLowerCase()) > -1); 
     }) 
    } 

を結果にteammebers.nameを使用する必要がありますまたはあなたが名前をフィルタリングするために、このような何かを試してみることができ基本的に名前をフィルタリングしています。最初の名前の新しい配列がソートされた順序で必要な場合は、mapとsort

Answer 3

またはアンダースコア_を使用してください。マップ（）http://underscorejs.org/#map

var teamMembers = _.map(project.teammembers, function(item){ 
    return item.name 
}); 

Answer 4

結局私は成功しました。 私はハードコードされた配列から、私の既存のオブジェクトからアイテムを取得するために、最初からやり直しました。同じ問題を持つ人のための

が、これは私の最終的なコードです：

HTML：

<ion-searchbar (ionInput)="getNames($event)"></ion-searchbar> 
    <ion-list> 
     <ion-item *ngFor="let name of names"> 
     {{ name }} 
     </ion-item> 
    </ion-list> 

活字体：

​​

私はproject.teammembers.nameは少しだったと思います問題の新しい変数 '名前'だけで成功しました。あなたの助けを借りてくれてありがとう！