Attempting to fetch a list of movies from a Web API server on my localhost. The server does provide data when called with a Get request using the HttpClient module, but struggling to display it.
MovieList Component
import { Component, OnInit } from '@angular/core';
import { MovieService } from '../services/movie.service';
import { IMovie } from '../Interfaces/IMovie';
@Component({
selector: 'app-movielist',
templateUrl: './movielist.component.html',
styleUrls: ['./movielist.component.css'],
providers: [MovieService]
})
export class MovielistComponent implements OnInit {
private _movieService: MovieService;
movies: IMovie[] = [];
movie: IMovie;
constructor(movieService: MovieService) {
this._movieService = movieService;
}
ngOnInit(): void {
this.getMovies();
}
getMovies(): void {
this._movieService.getMovies().subscribe(movies => {
this.movies = movies;
return movies;
})
}
}
MovieService Component
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IMovie } from '../Interfaces/IMovie';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class MovieService {
private _movieUrl = 'http://localhost:50898/api/movie';
private _http: HttpClient;
constructor(http: HttpClient) {
this._http = http;
}
getMovies(): Observable<IMovie[]> {
return this._http.get<IMovie[]>(this._movieUrl);
}
}
When checking Chrome Developer Tools Network Tab, the server responds with:
[{"MovieID":1,"Name":"shining","Details":"details","MeetingDate":null},{"MovieID":2,"Name":"one flew over cuckoo","Details":"details","MeetingDate":"2018-05-07T00:00:00"},{"MovieID":3,"Name":"up","Details":"animaation","MeetingDate":"2018-05-07T00:00:00"}]
MovieListComponent HTML.Template
<p>
movielist works!
</p>
<div *ngIf="movies">
<ul>
<li *ngFor="let movie of movies">
<span>{{movies.MovieID}}</span>
</li>
</ul>
</div>
<button>
</button>
IMovie Interface:
export interface IMovie {
MovieID: number;
Name: string;
Details: string;
MeetingDate: Date;
}
MSSQL database visual: