Angular 4 pipe data in array from API observable

Question

Im trying to create a filter for my stories. I subscribe to the API call, and i get the data as an array of objects. I get this error, when im typing in the filterings. I've only included the relevant parts, but i can provide more if needed. Im not that great to Pipes in Angular 4, so any tips would be helpful! Thank you.

This is the responsedata:

Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DiscoverComponent } from './discover/discover.component'


@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  //transform is called every time that the input changes in the filter pipe
  transform(stories: any, term: any): any {
    //check if search term is undefined and return all stories
    if(term === undefined) return stories;
    // return updated storiesarray with filter
    return stories.filter((story) => {
      return story.name.toLowerCase().includes(term.toLowerCase()) //either true or false
    })
  }

}

Component:

private getStories(page, hits, feed) {
    feed = this.feed;
    if (this.noSpam || this.page > 0) { //no doubletap feed
      this.noSpam = false;
      this.storiesService.getStories(this.page, this.hits, this.feed)
        .subscribe(
        (data) => {
          console.log(data);
          if (!data || data.hits == 0 || data.hits < 6) {
            this.finished = true;
            console.log("No more hits :(")
          } else {
            this.finished = false;
            // this.data = data;
            for (let story of data.hits) {
              this.hitsArray.push(story);
              // console.log(data)
            }
          }
        })
      setTimeout(() => {
        console.log("Wait 2 seconds before trying to get feed!")
        this.noSpam = true;
      }, this.delay);

      console.log("side: " + this.page)
    }
  }

HTML:

<input [(ngModel)]="term" [ngModelOptions]="{standalone: true}" type="text" id="bloody-bird-forms" class="form-control">

And

<div class="col-xs col-sm col-md-4 col-lg-4 story" *ngFor="let story of hitsArray | filter:term">

Read angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe — JB Nizet
– JB Nizet, Commented Oct 22, 2017 at 18:38
So basically this means that angular doesnt provide filtering arrays? — blixenkrone
– blixenkrone, Commented Oct 22, 2017 at 18:55
It's plain English. It means it doesn't provide a filter and an orderBy pipe, and that it's a deliberate choice because it's a bad idea. So you shouldn't try creating one yourself, but instead filter from the component when the term changes. — JB Nizet
– JB Nizet, Commented Oct 22, 2017 at 18:57
Okay. So if i wanted to filter data in an array from the component, when the term changes, how do you suggest i do that? — blixenkrone
– blixenkrone, Commented Oct 22, 2017 at 19:01
<input [(ngModel)]="term" (ngModelChange)="filterTheArray()" .../>. — JB Nizet
– JB Nizet, Commented Oct 22, 2017 at 19:05

Adam A · Accepted Answer · 2017-10-22 18:40:27Z

0

When you are using ngFor with asychnronous data you have to use pipe 'async'. And after that you can use second, third pipe. Important is what order pipes have. First should be async, because order of executing is from left to right. If you want to use pipe in your controller you have to import that pipe and use like this.

const newString = pipename.transform(oldString);

answered Oct 22, 2017 at 18:40

Adam A

1771 silver badge18 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-10-22 18:40:29Z

0

It seems stories is either undefined or null, change your pipe as follows,

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  //transform is called every time that the input changes in the filter pipe
  transform(stories: any, term: any): any {
    //check if search term is undefined and return all stories
    if(!stories) return [];
    if(stories && term === undefined) return stories;
    // return updated storiesarray with filter
    if(stories && storiess.length > 0){
    return stories.filter((story) => {
      return story.name.toLowerCase().includes(term.toLowerCase()) //either true or false
    })}
  }

}

answered Oct 22, 2017 at 18:40

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

blixenkrone Over a year ago

Thank you, but that made this error: "ERROR TypeError: Cannot read property 'toLowerCase' of undefined". Also theres one to many "s" in storiess.length>0 right?

Sajeetharan Over a year ago

yes but the idea is you need to check values are there

blixenkrone Over a year ago

Sure, but i don't see how this affects the array, as the length is more than 6 objects in the array atm?

Collectives™ on Stack Overflow

Angular 4 pipe data in array from API observable

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related