Is there a way to manage products/items in a JSON file using Angular2 with HTTP and observables? I have successfully implemented GET Products, but need guidance on how to Add/Update/Delete items. Below is the code for reference:
product-list.component
export class ProductListComponent implements OnInit {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string;
errorMessage: string;
products: IProduct[];
constructor(private _productService: ProductService) {
}
toggleImage(): void {
this.showImage = !this.showImage;
}
deleteItem() : void {
this._productService.deleteProduct();
}
ngOnInit(): void {
this._productService.getProducts()
.subscribe(products => this.products = products,
error => this.errorMessage = <any>error);
}
product.service.ts
export class ProductService {
private _productUrl = 'api/products/products.json';
private headers = new Headers({'Content-Type': 'application/json'});
constructor(private _http: Http) { }
getProducts(): Observable<IProduct[]> {
return this._http.get(this._productUrl)
.map((response: Response) => <IProduct[]> response.json())
.do(data => console.log('All: ' + JSON.stringify(data)))
.catch(this.handleError);
}
deleteProduct(): Observable<IProduct[]> {
let id : number = 1;
return this._http.delete(`${this._productUrl}/${id}`)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}
product-list.component.html
<tbody>
<tr *ngFor='let product of products | productFilter:listFilter'>
<td>
<img *ngIf='showImage'
[src]='product.imageUrl'
[title]='product.productName | uppercase'
[style.width.px]='imageWidth'
[style.margin.px]='imageMargin'>
</td>
<td><a [routerLink]="['/product', product.productId]">
{{product.productName}}
</a>
</td>
<td>{{ product.productCode | lowercase }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price | currency:'USD':true:'1.2-2' }}</td>
<td>
<ai-star [rating]='product.starRating'
(ratingClicked)='onRatingClicked($event)'>
</ai-star>
</td>
<td>
<button class="delete"(click)="delete(product); $event.stopPropagation()">X</button>
</td>
</tr>
</tbody>
JSON file
[
{
"productId": 1,
"productName": "Leaf Rake",
"productCode": "GDN-0011",
"releaseDate": "March 19, 2017",
"description": "Leaf rake with 48-inch wooden handle.",
"price": 19.95,
"starRating": 3.2,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
},
{
"productId": 2,
"productName": "Garden Cart",
"productCode": "GDN-0023",
"releaseDate": "March 18, 2017",
"description": "15 gallon capacity rolling garden cart",
"price": 32.99,
"starRating": 4.2,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
},
{
"productId": 5,
"productName": "Hammer",
"productCode": "TBX-0048",
"releaseDate": "May 21, 2017",
"description": "Curved claw steel hammer",
"price": 8.9,
"starRating": 4.8,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
},
{
"productId": 8,
"productName": "Saw",
"productCode": "TBX-0022",
"releaseDate": "May 15, 2017",
"description": "15-inch steel blade hand saw",
"price": 11.55,
"starRating": 3.7,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
},
{
"productId": 10,
"productName": "Video Game Controller",
"productCode": "GMG-0042",
"releaseDate": "October 15, 2017",
"description": "Standard two-button video game controller",
"price": 35.95,
"starRating": 4.6,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
}
]