使用 Angular 2 在 json 文件中搜索

Question

I know Angular 2 is old, but I used the best course our library had, and most of it still works...

I have a list of data in a json file, which looks something like this:

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

I can display the whole list of names and can access the other data too. Now I want to have a text field so the user can search. I'd like a search option for name and one for text (even though the text doesn't display directly). The problem is: I'd like users to be able to search for single words, like 'one' and get all results that contain the word 'one'.

Is this possible? Or would I be better of learning how to set up a database online and implement a search option from there?

Answer 1

This might give you the idea for the search using 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);

Answer 2

Well, you could do this using a Pipe. But using Filter Pipes is not really recommended by the Angular Team. So you can essentially listen to the keyup event on your input field and then call a function to filter the data.

Now, since this is a strict filter object by a key, you can simply use the filter method on Array and check if the indexOf the searchInput in the name or text is >-1

Here's how:

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

  }


}

And in the template:

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

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

Here's a Sample StackBlitz for your ref.