Module 10: Retrieving Data Using HTTP.

Author: TXCodeDancer

APM/src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule} from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { ProductListComponent } from './products/product-list.component';
@@ -17,6 +18,7 @@ import { StarComponent } from './shared/star.component';
   imports: [
     BrowserModule,
     FormsModule,
+    HttpClientModule,
   ],
   bootstrap: [AppComponent]
 })

APM/src/app/products/product-list.component.ts

@@ -12,8 +12,9 @@ export class ProductListComponent implements OnInit {
     imageWidth: number=50;
     imageMargin: number=2;
     showImage: boolean=false;
+    errorMessage: string = '';
 
-    _listFilter: string;
+    _listFilter: string = '';
     get listFilter(): string {
       return this._listFilter;
     }
@@ -46,9 +47,13 @@ export class ProductListComponent implements OnInit {
       this.showImage = !this.showImage;
     }
 
-    ngOnInit(): void
-    {
-      this.products = this.productService.getProducts();
-      this.filteredProducts = this.products;
+  ngOnInit(): void {
+      this.productService.getProducts().subscribe({
+      next: products => {
+        this.products = products;
+        this.filteredProducts = this.products;
+      },
+        error: err => this.errorMessage = err
+      });
     }
 }

APM/src/app/products/product.service.ts

@@ -1,55 +1,47 @@
 import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, tap, map } from 'rxjs/operators';
+
 import { IProduct } from './products';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ProductService {
+  private productUrl = 'api/products/products.json';
+
+  constructor(private http: HttpClient) { }
+
+  getProducts(): Observable<IProduct[]> {
+    return this.http.get<IProduct[]>(this.productUrl)
+      .pipe(
+        tap(data => console.log('All: ' + JSON.stringify(data))),
+        catchError(this.handleError)
+      );
+  }
 
-  constructor() { }
+  getProduct(id: number): Observable<IProduct | undefined> {
+    return this.getProducts()
+      .pipe(
+        map((products: IProduct[]) => products.find(p => p.productId === id))
+      );
+  }
 
-  getProducts(): IProduct[]{
-    return [
-      {
-        "productId": 1,
-        "productName": "Leaf Rake",
-        "productCode": "GDN-0011",
-        "releaseDate": "March 19, 2019",
-        "description": "Leaf rake with 48-inch wooden handle.",
-        "price": 19.95,
-        "starRating": 3.2,
-        "imageUrl": "assets/images/leaf_rake.png"
-      },
-      {
-        "productId": 2,
-        "productName": "Garden Cart",
-        "productCode": "GDN-0023",
-        "releaseDate": "March 18, 2019",
-        "description": "15 gallon capacity rolling garden cart",
-        "price": 32.99,
-        "starRating": 4.2,
-        "imageUrl": "assets/images/garden_cart.png"
-      },
-      {
-        "productId": 5,
-        "productName": "Hammer",
-        "productCode": "TBX-0048",
-        "releaseDate": "May 21, 2019",
-        "description": "Curved claw steel hammer",
-        "price": 8.9,
-        "starRating": 4.8,
-        "imageUrl": "assets/images/hammer.png"
-      },
-      {
-        "productId": 8,
-        "productName": "Saw",
-        "productCode": "TBX-0022",
-        "releaseDate": "May 15, 2019",
-        "description": "15-inch steel blade hand saw",
-        "price": 11.55,
-        "starRating": 3.7,
-        "imageUrl": "assets/images/saw.png"
-      },
-    ]
+  private handleError(err: HttpErrorResponse) {
+    // in a real world app, we may send the server to some remote logging infrastructure
+    // instead of just logging it to the console
+    let errorMessage = '';
+    if (err.error instanceof ErrorEvent) {
+      // A client-side or network error occurred. Handle it accordingly.
+      errorMessage = `An error occurred: ${err.error.message}`;
+    } else {
+      // The backend returned an unsuccessful response code.
+      // The response body may contain clues as to what went wrong,
+      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
+    }
+    console.error(errorMessage);
+    return throwError(errorMessage);
   }
+
 }