如何在 Angular 中使用基于对象的 json 数据答案

【问题标题】：How to I use object based json data in Angular如何在 Angular 中使用基于对象的 json 数据
【发布时间】：2019-12-27 10:36:28
【问题描述】：

//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 }
  ]
}
-->

上面是我的员工服务代码和员工的组件，它们工作正常，所以在这里我还分享了我的 JSON 数据，说明我如何使用第二个 JSON 数据（低于第一个 JSON 数据）并且基于“项目”对象，所以我处于一种情况，我需要进行哪些更改才能获取基于对象的 JSON 数据..？

【问题讨论】：

标签： json angular object service angular8

【解决方案1】：

试试this.employees = data.items

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

【讨论】：

嘿，非常感谢，@Adrita Sharma..！

【解决方案2】：

尝试为您要检索的 Json 数据创建一个新接口。

interface RootObject {
 items: IEmployee[];
}

在您的服务中，获取此 RootObject 并将其返回给您的组件。

public getEmployees(): RootObject {
        return this.http.get<RootObject>(this._url).catch(this.errorHandler);
    }

在您的 Employee 组件中，从 RootObject 的“items”中检索 IEmployees 数组。

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

小心，您在服务功能中拼错了员工。您可能希望在 IDE 中启用拼写检查以避免错误；）

【讨论】：