I am currently working on setting up a filter for my stories. After subscribing to the API call, I receive the data in the form of an array of objects. However, I am encountering an error while trying to apply filters. Here is a snippet of relevant information, but I can provide more details if necessary. I am still learning about Pipes in Angular 4, so any tips or advice would be greatly appreciated! Thank you.
https://i.sstatic.net/XW6sU.png
Here is the response data:
https://i.sstatic.net/oVLQc.png
Pipe Section:
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 Section:
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 Section:
<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">