Angular 13 use RxJS to get array of objects

Question

I am trying to get and display an array of JSON objects from rest API using angular frontend and rxjs.

Following is my service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LicenseFoodBusiness } from './license-food-business';

import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';



@Injectable({
  providedIn: 'root'
})
export class LicenseFoodBusinessService {
  private REST_API_SERVER = "http://localhost:8080/foodlicenses";
  
  constructor(private httpClient: HttpClient) { }
  
  public sendGetRequest(): Observable<LicenseFoodBusiness[]> {
    return this.httpClient.get<LicenseFoodBusiness[]>(this.REST_API_SERVER);            
    }
}

Following is my component code:

import { Component, OnInit } from '@angular/core';;
import { LicenseFoodBusinessService } from '../license-food-business.service';
import { LicenseFoodBusiness } from '../license-food-business';

import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

@Component({
  selector: 'app-license-food-business',
  templateUrl: './license-food-business.component.html',
  styleUrls: ['./license-food-business.component.css']
})
export class LicenseFoodBusinessComponent implements OnInit {

  
  results: LicenseFoodBusiness[] = [];
  
  constructor(private lfbs: LicenseFoodBusinessService) { }
    
  ngOnInit(): void {
    this.lfbs.sendGetRequest()
        .subscribe(data => this.results = data);
      
    }
  }

Following is my model:

export interface LicenseFoodBusiness {
    LicenseId: number;
    SECP: string;
    NTN: string;
    SRB: string;
    SalesTax: string;
    NumberOfWarehouses: number;

}

Following is snippet from my componenct html:

<tr *ngFor="let licensefoodbusiness of results | async" >
        <td> {{licensefoodbusiness.LicenseId}} </td>
....

I am getting the following error:

Kindly help.

UPDATE:

After following the suggested edit, it does compile, but now I am not getting any data in the html table:

UPDATE 2 using console.log, I am getting three json objects being passed from the backend as below, but the objects arent being displayed with data is assigned to this.results.

  ngOnInit(): void {
    this.lfbs.sendGetRequest()
        //.subscribe(data => this.results = data);
        .subscribe(data => console.log(data));
      
    
  }

Kind of looks like you are getting empty values or the deserialization is not working. At least there are 3 rows. Try a console.log in the subscribe to see the contents. — Gunnar B.
– Gunnar B., Commented Dec 13, 2021 at 9:16

sandrooco · Accepted Answer · 2021-12-13 08:49:44Z

3

You "unwrap" the values from the observable via the .subscribe.

I think you can simply remove the | async pipe in your template.

answered Dec 13, 2021 at 8:49

sandrooco

8,88611 gold badges56 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zeeshan Arif Over a year ago

after removing async it did compile, but now the binded html table does not contain any data

sandrooco Over a year ago

(FYI: This would be a new question generally)

Collectives™ on Stack Overflow

Angular 13 use RxJS to get array of objects

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related