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

问题应该具体在于以下几行：

this.items = JSON.stringify(data);

执行此操作后，this.items将不再是可以使用Array.prototype.filter方法的有效JavaScript数组，因为它将变成JSON.stringify()的{{3}}。无论如何，您现在都不需要JSON.stringify()，在发送到您的API之前，您始终可以JSON.stringify()过滤所有数据。

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>;，大写字母“ A”。话虽如此，我建议始终尝试提供默认值，在这种情况下为空数组items: any[] = [];，但更好的方法是创建一个接口/类来表示您的数据结构：

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

items: Country[] = [];

我制作了一个离子String，以在基本级别上展示此功能。

以下是此功能的基本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);

希望有帮助！

Answer 2

我得到了答案。我将json数据转换为数组。我使用Run Code进行声明。我用

items: any;

用于将json转换为数组。用于在过滤器后添加列表。我用过

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

最后的代码是

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

离子搜索栏过滤器不起作用

2 个答案: