Фильтр Ionic 3 вложенный JSON с ионной панелью поиска

У меня есть вопрос, как использовать ионную панель поиска для фильтрации элементов во вложенном объекте JSON. Когда я пытался отфильтровать элемент header, он работал отлично, но не работал для обертки name внутри brands.

{
"items": [{
        "header": "A",
        "brands": [{ "name": "Apple", "id": "1" }, { "name": "Adidas", "id": "2" }]
    },
    {
        "header": "B",
        "brands": [{ "name": "Bose", "id": "3" }, { "name": "Boss", "id": "4" }, { "name": "Birkenstock", "id": "5" }]
    },
    {
        "header": "M",
        "brands": [{ "name": "McDonalds", "id": "6" }]
    }
]
}

My search.ts:

    private result: any[];
  private searchItems: any;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private http: Http
  ) {
    let localData = this.http.get('assets/search-brand.json').map(res => res.json().items);
    localData.subscribe(data => {
      this.result = data;
    });
    this.initializeItems();
  }

  initializeItems() {
    this.searchItems = this.result;
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // 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.searchItems = this.searchItems.filter((item) => {
        return (item.header.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

Мой код (search.html):

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<p>{{test}}</p>
<ion-list *ngFor="let item of searchItems; let i = index">
    <ion-list-header>
        {{item.header}}
    </ion-list-header>
    <ion-item *ngFor="let brands of item.brands; let j = index" (click)="selectedBrand(brands.id)">{{brands.name}}</ion-item>
</ion-list>

Этот работает для фильтрации brands.name, как он сказал .toLowerCase() is not a function.


json ionic3 searchbar
person theBeginner    schedule 29.08.2017    source источник
comment
@JensHöpken Я отредактировал вопрос, когда я пытаюсь отфильтровать бренды. Название, я получил сообщение об ошибке, в котором говорилось, что .toLowerCase() не является функцией.   -  person theBeginner    schedule 29.08.2017
comment
return (item.header.toLowerCase().indexOf(val.toLowerCase()) > -1) этот код не фильтрует по brands.name?   -  person Duannx    schedule 30.08.2017
comment
@Duannx этот может фильтровать только заголовок, а не бренды.   -  person theBeginner    schedule 30.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Ваши данные JSON могут иметь элемент с header == null или не иметь свойства brands. Поэтому, чтобы обеспечить правильную работу поиска, вы должны обрабатывать этот случай с помощью оператора if. Вам нужно переписать функцию фильтра, чтобы получить ожидаемый результат.
Попробуйте следующее:

this.searchItems = this.searchItems.map((item)=>{
   if(item && item.brands && item.brands.length > 0){
     item.brands = item.brands.filter(brand=>{
      if(!brand.name) return false;
      return brand.name.toLowerCase().indexOf(val.toLowerCase()) > -1;
     });
   }    
   retrun item;   
})
person Duannx    schedule 30.08.2017
comment
Не повезло и с этим, он сказал, что невозможно получить фильтр свойств неопределенной или нулевой ссылки. :( - person theBeginner; 30.08.2017
comment
Это работает! Спасибо за ваше руководство, но я все еще пытаюсь понять, как работает этот код. - person theBeginner; 31.08.2017
comment
Рад помочь. Я обновил свой ответ, чтобы объяснить. Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать. - person Duannx; 31.08.2017