Поиск в файле JSON с Angular 2

Question

Я знаю, что Angular 2 старый, но я использовал лучший курс, который имел наша библиотека, и большая часть его все еще работает ...

У меня есть список данных в файле json, который выглядит примерно так:это:

    {
        "name"          :"example one",
        "source"        :"",
        "source_type"   :"",
        "text"          :"A bumblebee in the field"
    },
    {
        "name"          :"example two",
        "source"        :"",
        "source_type"   :"",
        "text"          :"Two flowers with red petals"
    },

Я могу отобразить весь список имен и получить доступ к другим данным тоже.Теперь я хочу иметь текстовое поле, чтобы пользователь мог искать.Я хотел бы найти вариант поиска по имени и один для текста (хотя текст не отображается напрямую).Проблема в том, что я хотел бы, чтобы пользователи могли искать отдельные слова, например «один», и получать все результаты, содержащие слово «один».

Возможно ли это?Или мне было бы лучше узнать, как настроить базу данных в Интернете и реализовать оттуда опцию поиска?

Answer 1

Ну, вы могли бы сделать это, используя трубу.Но использование Filter Pipes в действительности не рекомендуется Angular Team.Таким образом, вы можете прослушать событие keyup в своем поле ввода и затем вызвать функцию для фильтрации данных.

Теперь, поскольку это строгий объект фильтрации по ключу, вы можете просто использовать filter метод на Array и проверьте, является ли indexOf searchInput в name или text >-1

Вот как:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  filterText;

  data = [{
    "name": "example one",
    "source": "",
    "source_type": "",
    "text": "A bumblebee in the field"
  },
  {
    "name": "example two",
    "source": "",
    "source_type": "",
    "text": "Two flowers with red petals"
  }];

  filteredData = [];

  ngOnInit() {
    this.filteredData = [...this.data];
  }

  onChange() {
    console.log('ran');
    this.filteredData = this.data.filter(
      datum => (datum.name.indexOf(this.filterText) > -1 || datum.text.indexOf(this.filterText) > -1));

    console.log(this.filteredData);

  }


}

Ив шаблоне:

<input type="text" [(ngModel)]="filterText" (keyup)="onChange()">

<ul>
  <li *ngFor="let datum of filteredData">
    {{ datum.name }}
  </li>
</ul>

Вот Образец StackBlitz для вашей ссылки.

Answer 2

Это может дать вам идею для поиска, используя filter

var searchText = "three";
    var data = [
      {
        name: "example one three",
        source: "",
        source_type: "",
        text: "A bumblebee in the field"
      },
      {
        name: "example two",
        source: "",
        source_type: "",
        text: "Two flowers with red petals"
      },
      {
        name: "example three",
        source: "",
        source_type: "",
        text: "Two flowers with red petals"
      }
    ];

    let newObj = data.filter((value)=>{
      return value.name.indexOf(searchText) != -1 ? value : null
    });
    console.log(newObj);