search element in array using observable in angular 2

Question

I have search input for the book title and I need it to find books without reloading the page. My code works at the moment witht he reloading of the page, I type book name and push submit.

How can I rewrite this code in order to use observable, thus search for the books without reloading the page?

filterByName(){
    this.filteredItems = [];

    if(this.inputName != ""){
      this.books.forEach(element => {
        if(element.author.toUpperCase().indexOf(this.inputName.toUpperCase())>=0 ||
            element.title.toUpperCase().indexOf(this.inputName.toUpperCase())>=0){
          this.filteredItems.push(element);
        }
      });
    }else{
      this.filteredItems = this.books;
    }
    console.log(this.filteredItems);
    this.init();
  }

HTML:

<div class="form-group">
    <label>Filter </label>
    <input  type="text"  id="inputName" [(ngModel)]="inputName"/>
    <input type="button" (click)="filterByName()" value="Apply"/>
  </div>

rbaumier · Accepted Answer · 2017-07-12 09:31:47Z

1

You don't need to use observables for that, if you update your filteredItems variable in your component, it'll be updated in your view, such as:

filterByName() {
  if(this.inputName.length < 1) {
    return;
  }
  this.filteredItems = this.books.filter(book => {
    return book.author.toUpperCase().indexOf(this.inputName.toUpperCase()) >= 0 ||
      book.title.toUpperCase().indexOf(this.inputName.toUpperCase()) >= 0
  });
}

and in your view:

<div class="form-group">
  <label>Filter </label>
  <input  type="text"  id="inputName" [(ngModel)]="inputName"/>
  <input type="button" (click)="filterByName()" value="Apply"/>
</div>

<ul>
  <li *ngFor="let book in filteredBooks">{{ book.title }} - {{ book.author }}</li>
</ul>

answered Jul 12, 2017 at 9:31

rbaumier

5946 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rick1 Over a year ago

I need to update it without using submit button. I don't need to reload the page.

rick1 Over a year ago

It should like with the ajax, you type text and right away you have result

rbaumier Over a year ago

Then you can attach an event to your input, such as: <input (keyup)="filterByName($event.target.value)"> and remove your button, your function will now be filterByName(input) and you will use input variable instead of this.input

rick1 Over a year ago

it doesn't work properly, if I type something it can find it but if I remove text and type something again it doesn;'t show me anything

Collectives™ on Stack Overflow

search element in array using observable in angular 2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related