How do I send REST response to html in angular?

Question

I am able to get data from the REST API in my application, i am able to print the data on to the console, but no idea how do i display on to html, can any one help me on this please?

App.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, Inject } from '@angular/core';
import { Employee } from './employee';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'emp-data-example';
  employees:Employee[]=[];
  constructor(@Inject(HttpClient) private http:HttpClient){

  }

  ngOnInit(){
    this.http.get("http://localhost:8080/api/all").subscribe(
    response=>{
      this.employees=response; // here is error because response is an Object and employees is an array
    });
    //resp.subscribe((data)=>{this.employees=data});
    
  }

}

app.component.html

<div>
  <table border="1">
    <tr>
      <th>Emp Id</th>
      <th>Emp Name</th>
      <th>Salary</th>
    </tr>
    <tr ngFor="let employee of employees">
      <td>{{employee.id}}</td>
      <td>{{employee.name}}</td>
      <td>{{employee.department}}</td>
      <td>{{employee.salary}}</td>
    </tr>
  </table>
</div>

No its saying,The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is missing the following properties from type 'Employee': id, name, department, salaryts(2696) — ASR
– ASR, Commented Dec 3, 2020 at 5:53
[{"id":0,"name":"sudheer","department":"IT","salary":12344.0},{"id":23,"name":"kumar","department":"ECE","salary":12345.0}] is the response i am getting from REST and same only printing on console. — ASR
– ASR, Commented Dec 3, 2020 at 6:09
if this is the response, your code should work. But make sure your Employee model has the properties — firatozcevahir
– firatozcevahir, Commented Dec 3, 2020 at 6:11

misha1109 · Accepted Answer · 2020-12-03 06:25:11Z

3

Try to set the type of the response to Employee and add it to your array like so:

    this.http.get("http://localhost:8080/api/all").subscribe(
    (response: Employee[]) =>{
      this.employees.push(...response);
    });

edited Dec 3, 2020 at 6:25

answered Dec 3, 2020 at 6:08

misha1109

3982 silver badges5 bronze badges

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

5 Comments

ASR Over a year ago

I have added the above code, but in console its saying ERROR TypeError: Cannot read property 'id' of undefined. can you please tell me whats wrong with app.component.html ?

vlad katz Over a year ago

this is not compatible with the response he described . the response is an array of employees as is the employees object. here you are trying to push an array into array.

misha1109 Over a year ago

then: (response: Employee[]) =>{ this.employees.push(...response);

vlad katz Over a year ago

@misha1109 this would work, but it's not that most elegant way.

misha1109 Over a year ago

@vladkatz seems almost identical your answer, i prefer to push to the array in case the http request will not only happen onInit

vlad katz · Accepted Answer · 2020-12-03 06:21:49Z

2

since you are getting array in the response and its from an employee type it should be something like that:

this.http.get("http://localhost:8080/api/all").subscribe(
(response: Array<Employee>) =>{
  this.employees = response;
});

answered Dec 3, 2020 at 6:21

vlad katz

5223 silver badges10 bronze badges

2 Comments

ASR Over a year ago

Thank you very much :) I really appreciate your work.

vlad katz Over a year ago

any time. this should work event without the casting, but you should always check the combability between the receiving object from the API and the assigned object inside the component/service. if you'll try putting an array inside an regular object, you'll get errors and vise versa

Collectives™ on Stack Overflow

How do I send REST response to html in angular?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related