Создать новый массив из существующих свойств

Question

Создать новый массив из существующих свойств

0

У меня есть объект как таковой:

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

и т.п.

Я создаю приложение, и я хочу добавить в него элемент поиска, чтобы вы могли искать разных членов команды. Я хочу инициализировать все имена свойств "из каждого члена команды". Это единственное, что нужно фильтровать.

Я подумал о двух способах:

Создайте новый массив с именами только проекта> teammembers.
Просто инициализируйте имена. Но мне это не удалось.

Можете ли вы помочь мне сделать правильный выбор и объяснить мне, как я могу добиться успеха? Я даже не знаю, как сделать новый массив из существующего. Я думал примерно так:

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

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

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

J.DD 06 июль 2016, в 13:35

Источник

Теги:

javascript

ionic-framework

angularjs

object

arrays

4 ответа

Ещё вопросы

Amir Popovich · Answer 1 · 2016-07-06T09-09-00.000Z

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

Спасибо за быстрый ответ. Хорошо, как создать новый массив :-) Я скоро попробую, но сначала хочу попробовать, не создавая новый массив
@ Ответ Талайвара должен решить вашу проблему. Вы фильтровали не тот элемент. Он фильтрует правильный элемент (teammembers).

Thalaivar · Answer 2 · 2016-07-06T08-06-00.000Z

Это не должно быть 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

Спасибо за быстрый ответ! Я больше не получаю ошибку, так что это хорошо. Но это не будет фильтровать либо. Он по-прежнему показывает все имена, без фильтрации ...
Я вижу, к сожалению, этот код все еще не работает. Я не уверен, что здесь идет не так .. Нет ошибок, просто не фильтровать имена внизу.

Dmitri Algazin · Answer 3 · 2016-07-06T10-14-00.000Z

или используйте знак подчеркивания _.map() http://underscorejs.org/#map

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

J.DD · Answer 4 · 2016-07-06T09-57-00.000Z

В конце концов мне это удалось. Я начал с самого начала, начиная с жестко закодированного массива, чтобы получить элементы из моего существующего объекта.

Для тех, кто с той же проблемой, это мой последний код:

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