CODEWITHSUNDEEP
javascriptangular
Vadim Has
Vadim Has

Reputation: 37

Post and Put in Angular2

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));


}

}

Upvotes: 1

Views: 56

Answers (1)

TheCog19
TheCog19

Reputation: 1209

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)

Upvotes: 1

Related Questions