Delete function error Angular 6 return undefined

Question

I am trying to write a delete function to delete a movie from my object.

This is my code but when I click on a delete button I get DELETE: Error.

What do you think is the error in my code?

You can check out my code here ...

movie-model.ts

export class Movie {
  Id: number;
  Title: string;
  Year: number;
  Runtime: string;
  Genre: string;
  Director: string;
}

data.service.ts

import { Movie } from './model/movie.model';

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }
  baseUrl: string = 'http://localhost:4200/';

  getMovies() {
    return fetch('https://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b').then(function (resp) {
      return resp.json()
    });
  }

  createMovie(movie:Movie) {
    return this.http.post(this.baseUrl, movie);

  }

  deleteMovie(movie:Movie){
    return this.http.delete(this.baseUrl + movie.Id);
  }


}

movie-list.component.ts

import { DataService } from './../data.service';
import { Movie } from './../model/movie.model';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {

  movies = [
    {Id:1, Title: 'Avatar', Year: '2009'},
    {Id:2, Title: 'Harry Potter', Year: '2001'},
    {Id:3, Title: 'Spiderman 3', Year: '2007'}
  ];

  constructor(private dataService:DataService){}

  ngOnInit() {
    this.getMovie().then(dt => {
      this.movies.push(dt);

    })
  }

  getMovie() {
    return fetch('https://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b').then(function (resp) {
      return resp.json()
    });
  }

  deleteMovie(movie: Movie): void {
    this.dataService.deleteMovie(movie.Id)
      .subscribe( data => {
        this.movies = this.movies.filter(u => u !== movie);
      })
  };
}

This is the error I get ...

What can I do for the delete button to work and give me an alert and then delete itself from the object?

Answer 1

You try to acces an endpoint where actually your angular app is running: baseUrl: string = 'http://localhost:4200/'; This is the default port of your angular application on your local computer, and you try to call an delete endpoint of an external rest api I guess.

But the rest service does not run on your localhost on port 4200, thats why you get a 404 not found. I think you have to call delete on this endpoint https://www.omdbapi.com.

EDIT:

If you want delete a movie from your list, you have to delete the entry in your array. The easiest way would be if you change the id attribute to imdbID because the response type from omdbapi doesn't have an id attribute which means your id will always be undefined. Then when you want to delete an entry you could do it like this:

 deleteMovie(imdbID: string): void {
    this.movies = this.movies.filter(m => m.imdbID !== imdbID)
  };

It's almost the same code that you have but without the delete call on the rest api. Because you don't want to delete the entry from the database but just on your angular app.

Answer 2

In the service file you have created method deleteMovie which accept a Movieobject

deleteMovie(movie:Movie){
    return this.http.delete(this.baseUrl + movie.Id);
  }

But in your Component movie-list.component.ts you are passing id in the delete method

import { DataService } from './../data.service';
import { Movie } from './../model/movie.model';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {

  movies = [
    {Id:1, Title: 'Avatar', Year: '2009'},
    {Id:2, Title: 'Harry Potter', Year: '2001'},
    {Id:3, Title: 'Spiderman 3', Year: '2007'}
  ];

  constructor(private dataService:DataService){}

  ngOnInit() {
    this.getMovie().then(dt => {
      this.movies.push(dt);

    })
  }

  getMovie() {
    return fetch('https://www.omdbapi.com/?i=tt3896198&apikey=9fa6058b').then(function (resp) {
      return resp.json()
    });
  }

  deleteMovie(movie: Movie): void { 
    // this.dataService.deleteMovie(movie.Id)    <- Your code error
    // Pass movie object 
       this.dataService.deleteMovie(movie)
      .subscribe( data => {
        this.movies = this.movies.filter(u => u !== movie);
      })
  };
}