創建一個從exisiting性能的新陣列

我有一個對象，例如：創建一個從exisiting性能的新陣列

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種方式：

創建只有在它的項目的名稱> teammembers 一個新的陣列。
只需初始化名稱即可。但是我沒有成功。

你能幫我做出正確的選擇並向我解釋我如何能成功嗎？我甚至沒有現在如何從現有的陣列中創建一個新的陣列。我在想這樣的事情：

var teamMembers = project.teammembers.name();

但除了那個選項，它會是最好的，如果我可以只使用對象的名稱屬性。

我這個地步（我使用離子2 /角2）

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

在我的打字稿文件我有以下幾點：

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

但它不工作。我收到錯誤：無法讀取未定義的屬性「過濾器」。

請問有人可以幫我嗎？提前致謝。

來源

2016-07-06 J.DD

您可以使用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 }));

更好的方法是創建一個pipe將使用Array.prototype.filter過濾搜索結果。

來源

2016-07-06 10:54:31

感謝您的快速響應。好現在如何做一個新的陣列:-)我會盡快嘗試，但首先我想嘗試一下，而不是一個新的陣列 –

@ Thalaivar的答案應該可以解決您的問題。您正在過濾錯誤的元素。他正在篩選正確的元素（teammembers）。 –

它不應該是this.project.teammembers.name和應該只是this.project.teammembers然後用teammebers.name，導致過濾器

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

或者你可以嘗試這樣的事情來篩選名稱...

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

SO基本上你是通過名稱篩選，然後如果你想要一個新的陣列與他們的名字排序順序......你可以做map和sort

來源

2016-07-06 10:54:43 Thalaivar

感謝您的快速響應！我不再有錯誤了，所以這很好。但它不會過濾。它仍然顯示所有的名稱，沒有過濾... –

我看到，不幸的是，代碼仍然無法正常工作。我不確定這裏出了什麼問題。沒有錯誤，只是不過濾下面的名字。 –

或使用下劃線_。地圖（）http://underscorejs.org/#map

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

來源

2016-07-06 11:35:56

最終我成功了。我從頭開始重新開始，從一個硬編碼數組中獲取我現有對象中的項目。

對於同樣的問題，任何人，這是我的最終代碼：

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有點的問題。現在只有「名稱」的新變量，它成功了。非常感謝您的幫助！

來源

2016-07-06 12:11:40

創建一個從exisiting性能的新陣列

回答

相關問題