从现有属性创建新数组

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

等等

我正在制作一个应用程序，我想在其中添加一个搜索元素，以便您搜索不同的团队成员。我想初始化每个团队成员的所有属性“名称”。这是唯一需要过滤的东西。

我想到了两种方法：

1. 创建一个仅包含项目名称的新数组 > teammembers 在里面。
2. 只需初始化名称。但我没有成功。

你能帮我做出正确的选择并向我解释我如何才能成功吗？ 我什至现在都不知道如何从现有的数组中制作一个新的数组。我在想这样的事情：

var teamMembers = project.teammembers.name();

但除了这个选项，最好只使用对象外的 name 属性。

我走了这么远（我正在使用 Ionic 2 / Angular 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);
      })
    }
  }

但它不起作用。我收到错误：无法读取未定义的属性“过滤器”。

有没有人可以帮助我？提前致谢。

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

更好的方法是创建一个pipe，它将使用Array.prototype.filter 过滤您的结果。

Answer 2

它不应该是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();

所以基本上你是通过名称进行过滤，然后如果你想要一个新数组，其名字按排序顺序...你可以这样做 map 和 sort

Answer 3

或使用下划线 _.map() 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>

打字稿：

export class Page1 {
    names;
}

constructor () {
    this.initializeNames();
}

initializeNames() {
    this.names = this.project.teammembers.map(function(item){ return item.name }); // Thanks a lot Amir for this !
  }

getNames(ev) {
    // Reset items back to all of the items
    this.initializeNames();

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

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.names = this.names.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

我认为 project.teammembers.name 有点问题。现在有了“名称”的新变量，它成功了。非常感谢你们的帮助！