Issue
I have recently started learning Angular and Typescript and I was building a small test application that would call data from an existing local Web API that serves HR data. I checked via Fiddler to make sure that the API is returning the dataset I am expecting and the data is fine. I created a component and service to take these results and assign them to an Employee interface seen below:
export interface Employee {
department: string;
departmentId: number;
email: string;
employeeId: number;
firstName: string;
hireDate: string;
jobId: number;
lastName: string;
manager: string;
managerId: number;
phoneNumber: string;
salary: number;
title: string;
}
and the data I am receiving from the API looks like this:
[{…}]
0
:
department
:
null
departmentId
:
6
email
:
"bruce.ernst@sqltutorial.org"
employeeId
:
5
firstName
:
"Bruce"
hireDate
:
"5/21/1991"
jobId
:
9
lastName
:
"Ernst"
manager
:
null
managerId
:
2
phoneNumber
:
"590.423.4568"
salary
:
6000
title
:
null
[[Prototype]]
:
Object
length
:
1
[[Prototype]]
:
Array(0)
That data is pulled via this service code employee.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Employee } from '../Interfaces/employee';
import { Observable, of, throwError } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
constructor(private http: HttpClient,
private route: ActivatedRoute) {
}
getEmployeeById(id: number): Observable<Employee> {
const employee = this.http.get<Employee>("http://localhost:200/api/Employee/GetEmployeeById?id=" + id);
return employee;
}
}
My Employeedetail component for taking the data and assigning it to inputs is as follows:
import { Component, OnInit, Input } from '@angular/core';
import { Employee } from '../Interfaces/employee';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { EmployeeService } from '../services/employee.service';
@Component({
selector: 'app-employeedetail',
templateUrl: './employeedetail.component.html',
styleUrls: ['./employeedetail.component.css']
})
export class EmployeedetailComponent implements OnInit {
@Input() employee?: Employee;
constructor(private route: ActivatedRoute,
private employeeService: EmployeeService,
private location: Location) { }
ngOnInit(): void {
this.getEmployee();
}
getEmployee(): void {
const id = Number(this.route.snapshot.paramMap.get('id'));
this.employeeService.getEmployeeById(id)
.subscribe(e => {
console.log(e);
this.employee = e;
});
}
goBack(): void {
this.location.back();
}
}
In the line console.log(e), I get the value I am expecting when I view it in the devtools on the browser, but when I assign it with the line this.employee = e, I get "undefined" for everything. I do not get any errors at all.
I am sure that this is something simple that I am just overlooking as I have been jumping back and forth between this and some other React/TS code, but for whatever reason I am not seeing it.
Any help will be greatly appreciated. Let me know if I am missing any code that would help explain the issue.
Solution
It seems you are getting an array of one object in your response :
[{…}]
0
:
department
:
In this case, update your service method with correct type:
const employee = this.http.get<Employee[]>("http://localhost:200/api/Employee/GetEmployeeById?id=" + id);
and the assignement of your variable as well
this.employeeService.getEmployeeById(id)
.subscribe(e => {
console.log(e);
this.employee = e[0];
});
Answered By - hasnaas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.