Null response from API in Angular

Question

Learning Angular 2 and building an app with .Net Core
I've an API from which json response is passed to Client Side. In my Angular2 service, used Observable to read the response and pass it to my component and then to view.
Tested in PostMan and my API is responding expected output. I'm sure the service has some issue which is taking time to resolve.

API :

[HttpGet]
    public List<MovieFields> Get()
    {
        path += @"\Data\MovieSource.json";
        string jsonSource = System.IO.File.ReadAllText(path);
        List<MovieFields> source = JsonConvert.DeserializeObject<List<MovieFields>>(jsonSource);
        return source;
    }

Json c# class :

public class MovieFields
{
    public string Id { get; set; }
    public string Title { get; set; }
}

Service :

export class MoviesService{

constructor(private http: Http) {
}

getMovies() {
    return this.http.get('api/Movies')
        .map(res => <Array<MovieProperties>>res.json());
}

}

Component :

export class AllMoviesComponent implements OnInit {

private movieProp: Array<MovieProperties>;
ngOnInit() {
    this.moviesService.getMovies()
        .subscribe(ban => this.movieProp = ban);
}

Angular Json Interface :

export interface MovieProperties {    
Id: string;
Title: string;

}

and finally my JSON:

 [
{
  "Id": "1",
  "Title": "Olympus Has Fallen"
},
{
  "Id": "2",
  "Title": "Man of Steel"
}  ]

Answer : edited my service as below

getMovies(): Observable<MovieProperties[]> {

    return this.http.get('api/Movies')
        .map(this.extractData)
        .catch(this.handleErrors);
}
private extractData(res: Response) {
    let data = res.json();
    return data;
}

thanks Sajeetharan

Nothing to be sorry , Just so that you know . I havent started with ng2 yet :D — 32teeths
– 32teeths, Commented Apr 15, 2017 at 9:21
Why are you wasting cpu cycles (and memory) by deserializing your json file and then serializing it again? You can directly stream the json file. by return PhysicalFile(path, "application/json") — Tseng
– Tseng, Commented Apr 15, 2017 at 9:39

Sajeetharan · Accepted Answer · 2017-04-15 09:23:04Z

1

Your method inside the service should be like this,

getMovies() : Observable<MovieProperties[]>{
    return this._http.get('api/Movies')
        .map((response: Response) => <MovieProperties[]>response.json())
        .catch(this.handleError);
}

private handleError(error: Response){
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

answered Apr 15, 2017 at 9:23

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

Davey_31 Over a year ago

are these are same Array<MovieProperties> or MovieProperties[]?? because my API returns List

Sajeetharan Over a year ago

MovieProperties[] would be fine

Davey_31 Over a year ago

mapping at component is not working.this.moviesService.getMovies() .subscribe(ban => console.log(ban)); logs the response from service but when I assign to my local variable this.movieprop returns null to view

Sajeetharan Over a year ago

this.moviesService.getMovies() .subscribe(ban=> this.movieProp =ban), error => this.errorMessage = <any> error;

Davey_31 Over a year ago

No luck. Still same result... anyway adding error handling is not mandatory right??

|

Ishan · Accepted Answer · 2019-11-05 05:39:51Z

1

export interface MovieProperties {    
id: string;
title: string;
}

Changing the case like this worked for me.

answered Nov 5, 2019 at 5:39

Ishan

3253 silver badges8 bronze badges

Collectives™ on Stack Overflow

Null response from API in Angular

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related