以角度解析来自 API 的 JSON 字符串

Posted 2023-03-13

【中文标题】以角度解析来自 API 的 JSON 字符串

【英文标题】：Parse JSON strnig from API in angular

【发布时间】：2018-08-15 19:43:36

【问题描述】：

我有一个返回以下数据的 API：

[
  
    "id": 1,
    "symbol": "20MICRONS",
    "series": "EQ",
    "isin": "INE144J01027",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  ,
  
    "id": 2,
    "symbol": "3IINFOTECH",
    "series": "EQ",
    "isin": "INE748C01020",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  ,
  
    "id": 3,
    "symbol": "63MOONS",
    "series": "EQ",
    "isin": "INE111B01023",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  ,
  
    "id": 4,
    "symbol": "VARDMNPOLY",
    "series": "EQ",
    "isin": "INE835A01011",
    "created_at": "2018-03-05 16:24:10",
    "updated_at": "2018-03-05 16:24:10"
  
]   

我希望以角度解析来自 api 的响应。我能够在控制台中记录数据，但无法映射数据类型。

export class SymbolsComponent implements OnInit 

  allSymbols: Symbols[] = [];

  constructor(private http: HttpClient, private apiUrl: ApiUrlService)  

  ngOnInit() 
    this.fetchListOfAllSymbol();
  

  fetchListOfAllSymbol() 
    this.http.get(this.apiUrl.getBaseUrl() + 'symbol').subscribe(data => 
        console.log(data);

    );
  

 

我的模型文件如下所示：

export class Symbols 

  constructor(private symbol: string, private series: string, private isin: string, private created: string) 

  

从 API 获得响应后，我需要将结果填充到 allSymbols 变量中。

【问题讨论】：

试试这个this.http.get(this.apiUrl.getBaseUrl() + 'symbol').map(response => response.json()).subscribe(data => console.log(data););

显示错误response.json is not a function

@Abhishek HttpClient 响应已经是 JSON 格式

【参考方案1】：

您的 JSON 对象属性不是 Symbols 的 100% 映射，您必须对其进行转换。

这里是一个例子，接口ServerSymbols包含了JSON对象的所有属性，现在你可以修改fetchListOfAllSymbol()为：

fetchListOfAllSymbol() 
    this.http.get<ServerSymbols[]>(this.apiUrl.getBaseUrl() + 'symbol')
      .subscribe((data: ServerSymbols[]) => 
        console.log(data);
        // convert ServerSymbols to Symbols 
      );

GET 将返回一个 ServerSymbols 列表

export interface ServerSymbols 
    id: number;
    symbol: string;
    series: string;
    isin: string;
    created_at: string;
    updated_at: string;

将 ServerSymbols 对象转换为 Symbols 对象：

convertFromServer(serverSymbols: ServerSymbols): Symbols 
    return new Symbols(serverSymbols.symbol, serverSymbols.series, serverSymbols.isin, serverSymbols.created_at);

【讨论】：

谢谢你为我工作得很好。但是是否必须有 100% 的映射。难道我们没有任何其他的动态方式。如果有人在后端 api 中添加任何一个参数，那么前端 api 将被破坏。是真的吗？？

@Abhishek 是的，这正是接口 的用途： 以保证字段/类型的一致性。如果有人将字段添加到后端，您必须将其添加到界面中。不过，您可以为各种情况创建partials。