0

I am able to fetch all books but Delete is not working. Dont know why? deleteByBookId method in service class is not working. Is it because I am not using json server? My service class is below

import { Injectable } from "@angular/core";
import { IBook } from './book';
import { BookList } from './app.booklist';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { element } from 'protractor';



@Injectable()
export class BookService {

    httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    }

    bookUrl: string = '../assets/books.json';
    boo: IBook = new IBook();

    public static bookList: IBook[] = [];//My Array

    constructor(private httpClient: HttpClient) {
        this.httpClient.get<IBook[]>(this.bookUrl).subscribe(book => {
            BookService.bookList = book; //storing in array
        });

    }

    getBookListByHttp(): Observable<IBook[]> {

        return this.httpClient.get<IBook[]>(this.bookUrl);
    }


    deleteBookById(id: number): void { //this method is not working
        this.httpClient.delete<IBook>(this.bookUrl + '/' + id, this.httpOptions);

    }


}

My BookList class

import { BookService } from './bookservice';
import { IBook } from './book';
import { OnInit, Component } from '@angular/core';

@Component({
    templateUrl: './app.bookcomponent.html',
    providers: [BookService]
})
export class BookList implements OnInit {
    status: boolean = true;
    books: IBook[];
    constructor(private bookservice: BookService) {

    }

    ngOnInit() {
        this.bookservice.getBookListByHttp()
            .subscribe(book => this.books = book);

    }

    deleteBookById(bookId: number): void {
        this.bookservice.deleteBookById(bookId);
    }

}

Html file associated with BookList class

<table border="2">
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>Cost</th>
        <th>Author</th>
        <th>Delete</th>
        <th>Edit</th>
    </tr>
    <tr *ngFor="let book of books">
        <td><input type="number" value="book.bookId" [(ngModel)]="book.bookId" [readonly]="status"></td>
        <td><input type="text" value="book.bookName" [(ngModel)]="book.bookName" [readonly]="status"></td>
        <td><input type="number" value="book.bookCost" [(ngModel)]="book.bookCost" [readonly]="status"></td>
        <td><input type="text" value="book.bookAuthor" [(ngModel)]="book.bookAuthor" [readonly]="status"></td>
        <td><button (click)="deleteBookById(book.bookId)">Delete</button></td>
        <td><button (click)="status = !status">Edit/Save</button></td>
    </tr>

</table>

My Json file and its location is Project>src>assets>books.json

[
    {
        "bookId": 101,
        "bookName": "Angular",
        "bookCost": 6000,
        "bookAuthor": "Ritu Raj"
    },
    {
        "bookId": 102,
        "bookName": "Angular 2",
        "bookCost": 6600,
        "bookAuthor": "Ritu Raj"
    }
]
Ritu Raj
  • 3
  • 2
  • Are you trying to hit a raw `.json` file and attempting to delete records from it? – Taplar May 05 '20 at 18:13
  • raw means?? I am just trying to delete records from books.json file. – Ritu Raj May 05 '20 at 18:14
  • By raw, I mean the url that you are going to is an actual json file, and not just an endpoint that is defined to have `.json` on the end of it. – Taplar May 05 '20 at 18:15
  • yes. What should I do then? – Ritu Raj May 05 '20 at 18:15
  • is there anyother way? – Ritu Raj May 05 '20 at 18:15
  • Yeah, then that is not going to work. A json file is the same as a text file. They are both logicless documents. They just store data. You have to use some other logical endpoint that has the ability to modify their contents. – Taplar May 05 '20 at 18:16
  • but I can read from that json. so I thought I can also delete its record. so what do I have to do to delete record? and also is json server is compulsory to perform crud operation? – Ritu Raj May 05 '20 at 18:18
  • Reading from resources is the most basic operation there is. It's just a simple resource retrieval by the http server. Create/Update/Delete all are not basic operations that an http server implements (ignoring that you could potentially do these with ssh or ftp commands). Typically you would have a server side application with endpoints that you call, that perform those operations with the input you give them. It does not have to be a json server. Any server side language that the http server is capable of running that has the ability to modify documents can work. – Taplar May 05 '20 at 18:21
  • @Taplar Can you please let me know how to modify local angular file using HTTP call? – Darshana Sep 13 '20 at 09:16

0 Answers0