Use ".filter" in angular

Question

I try filter data (get records with given number)

http.get(baseUrl + 'api/Student/Students1')
.filter( stud => stud.Phone == 123)
.subscribe(data => {
this.studentTEST = data.json() as Students[];
}, error => console.error(error));

But get error:

" Property 'Phone' does not exist on type 'Response' ".

Version of angular was 4.2.5, but lately updated in package.json (5.1.0). Find

I get db context from asp.net core controller.

This is my angular code:

import { Component, Inject } from '@angular/core';
import 'rxjs/Rx';
import { Http, Response } from '@angular/http';
import { Observable } from 'RxJS';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';


@Component({
    selector: 'fetchdata',
    templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {

    public studentTEST: Students[];
    public stud: Students[];

    constructor(private http: Http, @Inject('BASE_URL') baseUrl: string) {

    http.get(baseUrl + 'api/Student/Students1')
    .map((response: Response) => response.json() as Students[])
    .filter(stud => stud.Phone === 123);
    //subscribe(result => {
        //this.studentTEST = result.json();
 }


}

export interface Students {
     StdName: string;
     Email: string;
     Phone: number;
     Address: string;
 }

Now error :

Property 'Phone' does not exist on type 'Students[]'.

Please add some more details, response object or maybe even a working code example — Alexander_F, Dec 11 '17 at 12:58
Everything would be much easier if you named things correctly. You have an array of Students instance. So each element of the array is a Students. What is a Students? A group of students? So your API returns groups of students? Or does it, as I imagine, return an array of students, and each object in the array is thus **one Student**? Note that the Http service is deprecated. You'd better learn how to use the HttpClient service instead. — JB Nizet, Dec 17 '17 at 12:37

stojevskimilan · Answer 1 · 2017-12-11T16:14:22.633

1

First you need to map your get request to json() or use httpClient. Then you can filter, and remove you subscribe method from service. You need to subscribe in component you can use | async pipe.

http.get(baseUrl + 'api/Student/Students1') .map((response: Response) => response.json() as Students[]) .filter(stud => stud.Phone === 123);

edited Dec 11 '17 at 16:14

answered Dec 11 '17 at 13:04

stojevskimilan

970
8
12

You must import Response from http, and map and filter from rxjs/add/operator/map and rxjs/add/operator/filter.Please post your code so we can find those errors. – stojevskimilan Dec 12 '17 at 08:19
How else i can get the necessary data? – St.S Dec 12 '17 at 11:33
You need to write service and create method remove code from constructor. https://angular.io/tutorial/toh-pt4. Then we can inject service in your component, and call method and subscribe to get data. Also we will use HttpClient https://angular.io/guide/http. Lets refactor your code. – stojevskimilan Dec 12 '17 at 12:16
That doesn't make sense. If the json contains an array of Students, how could `stud.Phone` even compile? Arrays don't have a `Phone` property. – JB Nizet Dec 17 '17 at 12:34

score 1 · Answer 2 · answered Dec 17 '17 at 11:56

The latter error is completely correct:

Property 'Phone' does not exist on type 'Students[]'.

It doesn't. Phone exists on Students, not Students[].

You actually need to set the filter in your map:

http.get(baseUrl + 'api/Student/Students1')
 .map(response => response.json().filter(stud => stud.Phone === 123))

Then what you return here, is no longer a response of type Students[] so you need to leave that out.

Use ".filter" in angular

2 Answers2