How to I use object based json data in Angular - json

Question

//Employee service starts
import {
Injectable
} from "#angular/core";
import {
HttpClient,
HttpErrorResponse
} from "#angular/common/http";
import {
IEmployee
} from "../interfaces/employee";
import {
Observable
} from "rxjs/Observable";
import "rxjs/add/operator/catch";
import "rxjs/add/observable/throw";
#Injectable()
export class EmployeeService {
private _url: string = "assets/data/employee.json";
constructor(private http: HttpClient) {}
getEpmloyees(): Observable < IEmployee[] > {
return this.http.get < IEmployee[] > (this._url).catch(this.errorHandler);
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error.message || "Server Error");
}
}
//Employee service end
//-------**********-------*********------**********-------
//Employee component starts
#Component({
selector: "app-employee-details",
templateUrl: "./employee-details.component.html",
styleUrls: ["./employee-details.component.scss"]
})
export class EmployeeDetailsComponent implements OnInit {
public employees = [];
public errorMsg;
constructor(private _employeeService: EmployeeService) {}
ngOnInit() {
this._employeeService.getEpmloyees().subscribe(
data => ((this.employees = data),
error => (this.errorMsg = error)
);
}
}
//Employee component ends
<p>{{errorMsg}}</p>
<table border="1">
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
<th>Mobile</th>
<th>Action</th>
</tr>
<tbody *ngFor="let employee of employees">
<tr>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.age}}</td>
<td>{{employee.mob}}</td>
<td><button>Delete</button></td>
</tr>
</tbody>
</table>
<!--Used JSON data
[
{ "id": 1, "name": "sam", "age": 25, "mob": 9996663752 },
{ "id": 2, "name": "adward", "age": 26, "mob": 9124563712 },
{ "id": 3, "name": "yoshi", "age": 27, "mob": 9246663012 },
{ "id": 4, "name": "casie", "age": 29, "mob": 967663012 }
]
-->
<!-- This data through items object I want to use in above code
{
"items": [
{ "id": 1, "name": "harry", "age": 33, "mob": 3476643752 },
{ "id": 2, "name": "jorge", "age": 54, "mob": 7845633712 },
{ "id": 3, "name": "timon", "age": 65, "mob": 9753833012 },
{ "id": 4, "name": "simon", "age": 43, "mob": 8547763012 }
]
}
-->
Above is my Employee service code and employee's component which is working fine and so here also I have shared my JSON data on how I use second JSON data (which is below the first JSON data) and which is based on "items" object so I am in a situation that what changes do I need to get object base JSON data..?

Answer 1

Try with this.employees = data.items
ngOnInit() {
this._employeeService.getEpmloyees().subscribe(
data => ((this.employees = data.items),
error => (this.errorMsg = error)
);
}
}

Answer 2

Try creating a new interface for the Json data you're gonna retrieve.
interface RootObject {
items: IEmployee[];
}
In your service, get this RootObject and return it to your components.
public getEmployees(): RootObject {
return this.http.get<RootObject>(this._url).catch(this.errorHandler);
}
In your Employee Component, retrieve the array of IEmployees from "items" in the RootObject.
ngOnInit() {
this._employeeService.getEmployees().subscribe(
data => ((this.employees = data.items),
error => (this.errorMsg = error)
);
}
}
Be careful, you misspelled Employees in your service function. You might want to enable spell check in your IDE to avoid mistakes ;)