HttpClient: how to show data on DOM-CodePudding

This is an employee list from my mock db.json. I am trying to visualise it in the DOM. In the app.component.html if I write in the loop {{employee}}, it visualises a list of 2 items and each item is[object Object]. Otherwise if I write {{employee.name}} the error is: Property 'name' does not exist on type 'EmployeeService'.ngtsc(2339)

What am I missing? Any help will be appreciated.Thank you.

app.component.html:

{{title}}

<li *ngFor="let employee of employees">{{employee.name}}</li> //error with property name

app.component.ts

import { Component } from '@angular/core';
import { EmployeeService } from './service/employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'List of employees';

employees: EmployeeService[]=[];

constructor(private employeeService: EmployeeService) {}

ngOnInit(): void {
this.employeeService.getUsers().subscribe(emp => {
this.employees = emp;
  }) 
}
}

employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  constructor(private http: HttpClient) { }

  getUsers(): Observable<EmployeeService[]> {
    return this.http.get<EmployeeService[]>('http://localhost:3000/employees')
  }

}

db.json:

{
  "employees": [
    {
      "id": 1,
      "name": "Tim",
      "hired": true
    },
    {
      "id": 2,
      "name": "Jess",
      "hired": true
    }
  ]
}

CodePudding user response：

You could always see the data loaded to the template file using the json pipe operator,

Example <div>{{employees | json }}</div> , this will help you to understand the structure of data and access it correctly.

Solution to your problem:

The response from your getUsers() returns an object, that contains an array for employees. You were trying to access the data object.

Instead, you should retrieve the employees data from the object and loop through the employees data in your template file.

In your app.component.ts component:

import { Component } from '@angular/core';
import { EmployeeService } from './service/employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'List of employees';

employees: any[]=[]; // preferably a custom type/interface than 'any'

constructor(private employeeService: EmployeeService) {}

ngOnInit(): void {
this.employeeService.getUsers().subscribe(emp => {
this.employees = emp.employees;  // ------------------> Change
  }) 
}
}

Inside your app.component.html template:

<div *ngFor="let employee of employees">{{ employee.name }}</div>

In your employee.service.ts service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  constructor(private http: HttpClient) { }

  // Your custom interface/type should be the return type 
  getUsers(): Observable<any[]> {
    return this.http.get('http://localhost:3000/employees');
  }

}

Working app in Stackblitz

CodePudding user response：

// check whether the employee list is not empty before rendering it in UI
<ul *ngIf="employees">
  <li *ngFor="let employee of employees">{{ employee.name }}</li>
</ul>


// To view complete JSON dump in web page follow below: Add this import statement to your app module

import { CommonModule } from '@angular/common';

then include it in imports 

@NgModule({
  ...,
  imports: [CommonModule, ...],
})

<!-- in your app.html: -->

<div *ngIf ="employees">
   {{ employees | json}}
</div>