Question

基本上我想要的是将JSON响应加载到一个类数组中，但是随着Angular http被弃用，我在HttpClient上遇到了麻烦，我见过的所有其他版本都使用.map方法不再存在（仅在管道之后）。

我的JSON响应如下：

{
  "list": [
    {
      "Id": 1002469,
      "Summary": null,
      "StartDate": "2018-12-11T23:00:00",
      "EndDate": "2018-12-31T23:00:00",
...

我有两个类，一个是ListSearch和一个List类。

以下是我对API请求的代码：

getList() {
    return this.http.get('http://127.0.0.1:5002/list/' + this.token)
    ;
  }

this.apisService.getList()
      .subscribe((list: any) => {
        this.listSearch = list;
        console.log(list);
        },
        error => console.log('Error.')
      );

这完美地打印了我的响应JSON。但是，当我尝试将所有这些信息放入类或数组中时，它将是未定义的，或者它将获得类似以下的数据：

ListSearch {0: "{", 1: "
", 2: "↵", 3: " ", 4: " ", 5: """, 6: "l", 7: "i", 8: "s", 9: "t", 10: """, 11: ":", 12: " ", 13: "[", 14: "
", 15: "↵", 16: " ", 17: " ", 18: " ", 19: " ", 20: "{", 21: "
", 22: "↵", 23: " ", 24: " ", 25: " ", 26: " ", 27: " ", 28: " ", 29: """, 30: "I", 31: "d", 32: """, 33: ":", 34: " ", 35: "1", 36: "0", 37: "0", 38: "2", 39: "4", 40: "6", 41: "9", 42: ",", ...

我对以上结果的代码：

this.apisService.getList()
      .subscribe((list: ListSearch) => {
        const a = new ListSearch().deserialize(list);
        console.log(a);
        },
        error => console.log('Error.')
      );

您有什么建议我该如何做？

更新：

进行以下界面（使用此界面：https://jvilk.com/MakeTypes/）

export interface List {
    list?: (ListEntity)[] | null;
  }
  export interface ListEntity {
    Id: number;

并且以下代码仍返回 undefined ...

this.apisService.getList()
  .subscribe((list: ListSearch) => {

    console.log(list.list);

UPDATE2：

以下代码返回json“ {”

的第一个字符

this.apisService.getList()
      .subscribe((list: List[]) => {

        console.log(list[0]);
...

UPDATE3：

我想我快做好了：

  this.apisService.getList()
  .subscribe((data: ListSearch) => this.listSearch = {
    list: data['list']
    },

它现在返回：

{list: undefined}list: undefined__proto__: Objectconstructor: ƒ ...

****************** 解决方案： ******************

最后！我创建了一个简单的对象：

a: Object;

然后执行以下操作：

this.apisService.getList()
    .subscribe((data: string) => {
        this.a = JSON.parse(data);
        this.listSearch = <List>this.a;

它就像一种魅力！

Answer 1

由于您的JSON文件以{开头，因此HTTPClient会将其读取为singel对象。将服务代码更改为以下：

getList() {
    return this.http.get('http://127.0.0.1:5002/list/' + this.token);
  }

this.apisService.getList()
  .subscribe((list: any) => {
    this.listSearch = list.list;
    console.log(list);
    },
    error => console.log('Error.')
  );

Answer 2

您应该首先为这些类创建一个Model接口，然后

this.apisService.getList()
  .subscribe((list: ListSearch[]) => {
    const value = list;
    console.log(value);
    },
    (error: any) => console.log('Error.')
  );

Answer 3

正确的方法：

接口：

export interface IEmployee {
    id: number,
    name: string,
    age: number
}

服务：

getEmployees(): Observable<IEmployee[]>{
        return this.http.get<IEmployee[]>(this._url);
    }

组件：

public employees = [];

ngOnInit() {
    this._employeeService.getEmployees()
    .subcribe(
        data => this.employees = data
    );
}

如何在Angular中将JSON数据加载到类或类数组中？

3 个答案: