How to Retrieve Data into Fields in Angular 9 using JSON server?

Question

I have a crud application with a form and table on it and they are in two separate components.I want to retrieve the data from my table as the user click the button of the selected record he wants to view. I can already get the data as I clicked the view button thru console.log but I'm having a hard time displaying it into the fields inside my form. Can someone help me please? Thank you!

Here's my template for the table:

    <app-update></app-update>
    <h4>My Products</h4>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Product Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Quantity</th>                            
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let product of products">
                <td>{{product.id}}</td>
                <td>{{product.name}}</td>
                <td>{{product.description}}</td>
                <td>{{product.price}}</td>
                <td>{{product.quantity}}</td>
                <td>
                    <a [routerLink]="['crud/update/, product.id']">Update</a>
                    <button class=btn btn-danger (click)="viewProduct(product.id)">View</button>
                    <button class=btn btn-danger (click)="deleteProduct(product.id)">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Here's my form template

<div class="container" mt-5>
<h2>{{ header }}</h2>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="col-md-12 form-group">
            <label for="">Name</label>
          <input type="text" class="form-control" [ngModel]="product.id" name ="name">
        </div>
        <div class="col-md-12 form-group">
            <label for="">Description</label>
          <input type="text" class="form-control" [ngModel]="product.description" name ="description">
        </div>
        <div class="col-md-12 form-group">
            <label for="">Price</label>
          <input type="text" class="form-control" [ngModel]="product.price" name ="price">
        </div>
        <div class="col-md-12 form-group">
            <label for="">Quantity</label>
          <input type="text" class="form-control" [ngModel]="product.quantity" name ="quantity">
        </div>
        <div class="col-md-12 form-group">
            <button class="btn btn-success btn-lg btn-block" (click)="createProduct(crudService.currentProduct)">
            Add
            </button>
            <button class="btn btn-success btn-lg btn-block" (click)="createProduct(crudService.currentProduct)">
             Update
            </button>
           <!-- <button type="submit" class="btn btn-primary">Add</button> -->
        </div>
</form>
</div>

Here's my typescript for the console.log:

 viewProduct(id: number) {
    this.crudService.getById(id).subscribe(
      (data) => {
        this.crudService.getAll();
        console.log('User viewed successfully !', data);
      });
  }

And here's my service code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from "@angular/common/http";
import { Observable } from 'rxjs';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { Product } from './product';

@Injectable({
  providedIn: 'root'
})
export class CrudService {

  private apiServer = "http://localhost:3000";
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  }

  constructor(private httpClient: HttpClient) { }

  create(product): Observable<Product> {
    return this.httpClient.post<Product>(this.apiServer + '/products/', JSON.stringify(product), this.httpOptions)
    .pipe(
      catchError(this.errorHandler)
    )
  }  
  getById(id): Observable<Product> {
    return this.httpClient.get<Product>(this.apiServer + '/products/' + id)
    .pipe(
      catchError(this.errorHandler)
    )
  }

  getAll(): Observable<Product[]> {
    return this.httpClient.get<Product[]>(this.apiServer + '/products/')
    .pipe(
      catchError(this.errorHandler)
    )
  }

score 0 · Answer 1 · answered Jun 10 '20 at 05:56

Hope your viewProduct method is inside the same component where you have tables. Try to assign the service data of selected product to the product object in your component.

Use Spread operator {...data} only if you have properties of data objects matching with your product objects or else try to manually set each product property of product object.

viewProduct(id: number) {
    this.crudService.getById(id).subscribe(
      (data) => {
        this.crudService.getAll();
        // Use Spread operator only if you have properties of data objects matching with your product objects
        this.product = {...data};
        // Or else try to manually set each product property of product object like this
       // this.product.id = data.id;
        console.log('User viewed successfully !', data);
      });
 }

How to Retrieve Data into Fields in Angular 9 using JSON server?

1 Answers1