Создать новый массив из свойств

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

Но кроме этого варианта, было бы лучше, если бы я мог просто использовать свойство имени из объекта.

я был далеко (я использую Ионные 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); 
     }) 
    } 
    } 

Но это не работает. Я получаю сообщение об ошибке: Не могу прочитать свойство 'filter' undefined.

Есть ли кто-нибудь, кто может мне помочь? Заранее спасибо.

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

SO в основном вы фильтруете через имя, а затем, если вы хотите создать новый массив со своими именами в отсортированном порядке ... вы можете сделать 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> 

Машинопись:

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 был немного проблемы. Теперь с новой переменной только «имен» она преуспела. Большое спасибо за помощь ребятам!