Post and Put in Angular2

Question

I need some help with this. I'm Building a Library app .I need to get a list of books, titles, and authors from the server and be able to update and insert new books into the data base on the server. The Get Method works fine and i get a list of all the information but the pust method doesnt work due to this ERROR.

POST http://localhost:3002/app/components/bookdata/dbooks.json 404 (Not 
Found)



import {Injectable} from '@angular/core';
import {Http,Response} from '@angular/http';
import {Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import {RequestOptions} from  '@angular/http';

@Injectable()
export class BookService  {
public _url:string="app/components/bookdata/dbooks.json";

constructor(private _http:Http){}
getBooks(){

    return this._http.get(this._url)
    .map((res:Response)=>res.json());
}

insertNewBook(book:Book){



            let body=JSON.stringify(book);
            let headers=new Headers({'Content-Type':'application/json'});
            let options=new RequestOptions({headers:headers});
            this._http.post(this._url,body).subscribe();


       //  .map((res:Response)=>res.json());


    }
        }




export interface Book{
id:number;
Author:string;
Date:string;
Title:string;
}

AND THATS THE WAY I SEND IT

 import{Component,OnInit} from '@angular/core';
 import {Book} from '../services/book.service'
 import {Injectable} from '@angular/core';
 import {Http,Response} from '@angular/http';
 import {BookService} from '../services/book.service';
 import 'rxjs/add/operator/map';

 @Component({
 selector:'newBook',
 template:`
            <div>

            <div>
                <label for="Author">Author:</label>
                <input type="text" id="au" #au>
        </div>

        <div>
        </div>
        <div>

        <label for="Date">Date:</label>
        <input type="text" id="da" #da>
</div>

<div>
<label for="Titl">Title:</label>
<input type="text" id="ti" #ti>
</div>
<button (click)="InsertData(au.value,da.value,ti.value)">Create</button>
</div>

`

 })
export class NewBookComponent  {
 book:Book;
static num:number;

constructor(private _bookService:BookService){
    NewBookComponent.num=10;
}

InsertData(au:string,da:string,ti:string){

   let book:Book={id:NewBookComponent.num++,Author:au,Date:da,Title:ti};


                 this._bookService.insertNewBook(this.book);
             //.subscribe(res=>console.log(res));


}

}

Does this url exists? `http://localhost:3002/app/components/bookdata/dbooks.json` . If it exists, should it receive a post? It sounds like a JSON file for you to get data. JSON files won't receive POST request. — klauskpm, Aug 24 '17 at 11:23
And yes it does exist and i can GET data from it but i also need to update it and add data to it — Vadim Has, Aug 24 '17 at 11:26
You would need to read and write that file, using a server side technology, as Node. But you can also handle the changes "virtually": https://stackoverflow.com/q/32546100/1984885 . With Node, it looks like this: https://stackoverflow.com/a/37855581/1984885 — klauskpm, Aug 24 '17 at 11:28

score 1 · Answer 1 · answered Aug 24 '17 at 11:33

The reason this isn't working for you is because you're not POSTING to an API, you're writing to what is apparently just a static file. When you call the url in your app with just a get request, its smart enough to just give you the json back, but it's not smart enough to do anything else with it.

If you want to modify the file via POST requests, you're going to have to use a server-side technology to write an API, host the file on that server, and do traditional file operations on it based on the requests. In node, here's how you'd modify a file, and here's an example of how you might build an API in node. (Node, if you're not familiar, is a javascript serverside language, if you're familiar with angular, you can pick it up in no time)

Post and Put in Angular2

1 Answers1