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

Posted 2023-03-13

【中文标题】如何将 JSON 数据加载到 Angular 中的类或类数组中？

【英文标题】：How to load JSON data into a class or array of classes in Angular?

【发布时间】：2019-05-20 08:47:03

【问题描述】：

基本上我想要的是将我的 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);

更新 2：

以下代码返回json的第一个字符“”

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

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

更新3：

我想我已经接近正确了：

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

它现在返回：

list: undefinedlist: undefined__proto__: Objectconstructor: ƒ ...

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

终于！ 我创建了一个简单的对象：

a: Object;

然后执行以下操作：

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

它就像一个魅力！

【参考方案1】：

由于您的 JSON 文件以 开头，因此 HTTPClient 将其作为单个对象读取。修改服务代码如下：

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.')
  );

【讨论】：

谢谢，但如果我尝试用“this.listSearch”做某事，它会说它“未定义”。

也试过了：.subscribe((list: any) => this.listSearch = list; console.log(this.listSearch); this.listSearch.list.forEach(element => console.log(element.Id); ); 但返回了下一个错误：ERROR TypeError: Cannot read property 'forEach' of undefined

可以在这个方法之后发布日志吗：this.apisService.getList() .subscribe((list: any) => console.log(list); , error => console.log ('错误。') );

是的，如果我这样做，我会打印出 json： "list": [ "Id": 1002469, "Summary": null, "StartDate": "2018-12-11T23:00:00", "EndDate": "2018-12-31T23:00:00", ...

你可以试试console.log(Object.keys(list)) 或console.log(JSON.stringify(list)) 看看输出是什么

【参考方案2】：

你应该先为这些类创建一个模型接口，然后

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

【参考方案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
    );