фильтр ионного поиска не является функцией

Question

Я занимаюсь разработкой ионного приложения.Я хочу показать список стран в строке поиска при использовании ключевого слова.Я получаю данные из API.Он работает для

[
  'Amsterdam',
  'Berlin',
  'Bueno Aires',
  'Madrid',
  'Paris'
];

Но он не работает для массива json.

[{
    "name": "Afghanistan",
    "topLevelDomain": [".af"],
    "languages": ["ps", "uz", "tk"],
    "translations": {
        "de": "Afghanistan",
        "es": "Afganistán",
        "fr": "Afghanistan",
        "ja": "アフガニスタン",
        "it": "Afghanistan"
    },
    "relevance": "0"
}, {
    "name": "Åland Islands",
    "topLevelDomain": [".ax"],
    "languages": ["sv"],
    "translations": {
        "de": "Åland",
        "es": "Alandia",
        "fr": "Åland",
        "ja": "オーランド諸島",
        "it": "Isole Aland"
    },
    "relevance": "0"
}]  

Ошибка отображается как

TypeError:_this.items.filter is not a function

Ниже показан код:

export class ModalPage{
    resp;
    items: array<any>;
    showList;

    constructor(public navCtrl: NavController, public rest: RestProvider) {

    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad ModalPage');
    }

    getItems(ev: any){
         let val = ev.target.value;
         /**   call api ***/

            this.rest.selectCountryFn(val)
                .then(data => {
                this.items = data;
                this.items = JSON.stringify(data);
                console.log("json :"+this.items);   //json is shown as correct

                if (val && val.trim() != '') {

                    // Filter the items
                    this.items = this.items.filter((item) => {
                    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
                });


            } else {

                    // hide the results when the query is empty
                    this.showList = false;
                }

            });

            /*** api call end  ****/
        }
}

HTML-код

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
   <ion-list *ngIf="showList">
    <ion-item *ngFor="let item of items" (click)="select(item.name)">
      {{ item.name }}
    </ion-item>
</ion-list>

Пожалуйста, помогите мне.Я пробовал разные методы.Но я не получил результат ..

Answer 1

Я получил ответ.Я конвертирую данные JSON в массив.Я использовал items: any; для декларации.И я использовал

const usersJson: any[] = Array.of(this.items);

для преобразования JSON в массив.Для добавления списка после фильтра.Я использовал

this.items = <any[]>JSON.parse(this.items);

И окончательный код,

export class ModalPage{
    resp;
    items: any;
    showList;

    constructor(public navCtrl: NavController, public rest: RestProvider) {

    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad ModalPage');
    }

    getItems(ev: any){
         let val = ev.target.value;
         /**   call api ***/

            this.rest.selectCountryFn(val)
                .then(data => {
                this.items = data;

                const usersJson: any[] = Array.of(this.items);



                if (val && val.trim() != '') {

                    // Filter the items
                    this.items = usersJson.filter((item) => {
                    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
                });

                this.items = <any[]>JSON.parse(this.items);

                this.showList = true;


            } else {

                    // hide the results when the query is empty
                    this.showList = false;
                }

            });

            /*** api call end  ****/
        }
}

Answer 2

Проблема должна заключаться именно в следующей строке:

this.items = JSON.stringify(data);

После того, как это выполнено, this.items больше не является допустимым массивом JavaScript, который будет иметь Array.prototype.filter метод доступен, так как он становится String с JSON.stringify().В любом случае вам не нужно будет делать JSON.stringify() в данный момент, вы всегда можете JSON.stringify() все данные после фильтрации перед отправкой в ​​API.

getItems(ev: any) {
  let val = ev.target.value;
  /**   call api ***/

  this.rest.selectCountryFn(val)
    .then(data => {
      this.items = data;
      console.log("json :"+this.items);   //json is shown as correct

      if (val && val.trim() != '') {
        // Filter the items
        this.items = this.items.filter((item) => {
          return JSON.stringify(item).toLowerCase().indexOf(val.toLowerCase()) > -1;
        });
      } else {
        // hide the results when the query is empty
        this.showList = false;
      }
    });
    /*** api call end  ****/
}

После удаления вам потребуетсяобновите ваш оператор filter(), чтобы сделать что-то вроде строкового определения каждого элемента для использования с indexOf() или нацеливания на определенные свойства объекта для сравнения:

this.items = this.items.filter((item) => {
  return JSON.stringify(d).toLowerCase().indexOf(val.toLowerCase()) > -1;
});

Последнее, что вы определили, что определение свойства класса items: array<any>; неверно,Это должно быть items: any[]; или items: Array<any>; с большой буквы «А».При этом я бы рекомендовал всегда пытаться предоставить значение по умолчанию, в данном случае пустой массив items: any[] = [];, но еще лучше было бы создать интерфейс / класс для представления вашей структуры данных:

export interface Country {
  name: string;
  topLevelDomain: string[];
  languages: string[];
  translations: { [key: string]: string };
  relevance: string;
}

items: Country[] = [];

Я сделал Ionic StackBlitz , чтобы показать эту функциональность в действии на базовом уровне.

Ниже приведен базовый JavaScript-код этой функции:

const data = [{
  "name": "Afghanistan",
  "topLevelDomain": [".af"],
  "languages": ["ps", "uz", "tk"],
  "translations": {
    "de": "Afghanistan",
    "es": "Afganistán",
    "fr": "Afghanistan",
    "ja": "アフガニスタン",
    "it": "Afghanistan"
  },
  "relevance": "0"
}, {
  "name": "Åland Islands",
  "topLevelDomain": [".ax"],
  "languages": ["sv"],
  "translations": {
    "de": "Åland",
    "es": "Alandia",
    "fr": "Åland",
    "ja": "オーランド諸島",
    "it": "Isole Aland"
  },
  "relevance": "0"
}];

const val = 'AF';

const items = data.filter(d => {
  return JSON.stringify(d).toLowerCase().indexOf(val.toLowerCase()) > -1;
});

console.log(items);

Надеюсь, это поможет!