CODEWITHSUNDEEP
angularobservable
kresdjan
kresdjan

Reputation: 183

Trying to filter an Observable but property doesn't exist on type

I have an Observable getPages() that returns an array and I am trying to filter all pages where the property parent is equal to ´id´. But I don't progress because I can't seem to access that parent.

Property 'parent' does not exist on type 'Page[]'

console.log(this.wordpressService.getPages());

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
  0: {id: 43, date: "2019-01-18T09:07:42", date_gmt: "2019-01-18T09:07:42", guid: {…}, modified: "2019-01-18T09:17:16", …}
  1: {id: 28, date: "2019-01-14T20:46:39", date_gmt: "2019-01-14T20:46:39", guid: {…}, modified: "2019-01-16T12:19:20", …}
  2: {id: 25, date: "2019-01-14T20:45:59", date_gmt: "2019-01-14T20:45:59", guid: {…}, modified: "2019-01-16T13:44:56", …}
  3: {id: 16, date: "2019-01-14T20:37:42", date_gmt: "2019-01-14T20:37:42", guid: {…}, modified: "2019-01-16T12:18:42", …}
  4: {id: 12, date: "2019-01-14T20:24:35", date_gmt: "2019-01-14T20:24:35", guid: {…}, modified: "2019-01-18T09:06:41", …}
  5: {id: 4, date: "2019-01-14T19:57:45", date_gmt: "2019-01-14T19:57:45", guid: {…}, modified: "2019-01-16T12:19:13", …}
  length: 6
  __proto__: Array(0)

page-detail.component.ts (excerpt)

export class PageDetailComponent implements OnInit {
  pageId: Number;
  filteredPage = [];

  constructor(private route: ActivatedRoute, private wordpressService: WordpressService) {}

 this.wordpressService.getPages()
  .pipe(filter(page => page.parent === this.pageId))
  .subscribe(page => this.filteredPage = page);
}

wordpress.service.ts (excerpt)

import {HttpClient} from '@angular/common/http';
import {Page} from './page';

constructor(private http: HttpClient) {}

getPages(): Observable<Page[]> {
  return this.http.get<Page[]>(`${this.API}/pages`);
}

page.ts interface (excerpt)

export interface Page {
  id: number;
  date: string;
  date_gmt: string;
  guid: GUID;
  modified: string;
  modified_gmt: string;
  ...
  parent: number;
}

I would like to end up with a new array with filtered results of all the pages. But I just get undefined or nothing and I am assuming that it's because of this page.parent. Trying to learn rxjs I can't seem to figure out how to do this.

Upvotes: 3

Views: 196

Answers (1)

Kraken
Kraken

Reputation: 1955

You need to add map operator. Form error you have i can conclude that you are iterating trough whole object.

this.wordpressService.getPages()
  .pipe(map(pages => pages.filter((page) => page.parent === this.pageId)))
  .subscribe(page => this.filteredPage = page);

Hope it help

Upvotes: 4

Related Questions