以角度从 API 解析 JSON strnig [英] Parse JSON strnig from API in angular

问题描述

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

<预><代码>[{身份证":1，"symbol": "20MICRONS","系列": "情商","isin": "INE144J01027","created_at": "2018-03-05 16:24:10","updated_at": "2018-03-05 16:24:10"},{身份证":2，"symbol": "3IINFOTECH","系列": "情商","isin": "INE748C01020","created_at": "2018-03-05 16:24:10","updated_at": "2018-03-05 16:24:10"},{身份证":3，"symbol": "63MOONS","系列": "情商","isin": "INE111B01023","created_at": "2018-03-05 16:24:10","updated_at": "2018-03-05 16:24:10"},{身份证":4，"符号": "VARDMNPOLY","系列": "情商","isin": "INE835A01011","created_at": "2018-03-05 16:24:10","updated_at": "2018-03-05 16:24:10"}]

我希望从 api 角度解析这个响应.我能够在控制台中记录数据，但无法在数据类型中进行映射.

export class SymbolsComponent 实现 OnInit {allSymbols: 符号[] = [];构造函数(私有http:HttpClient，私有apiUrl:ApiUrlService){}ngOnInit() {this.fetchListOfAllSymbol();}fetchListOfAllSymbol() {this.http.get(this.apiUrl.getBaseUrl() + 'symbol').subscribe(data => {控制台日志(数据)；});}}

我的模型文件如下所示:

导出类符号{构造函数(私有符号:字符串，私有系列:字符串，私有 isin:字符串，私有创建:字符串){}}

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

解决方案

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

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

fetchListOfAllSymbol() {this.http.get(this.apiUrl.getBaseUrl() + 'symbol').subscribe((数据:ServerSymbols[]) => {控制台日志(数据)；//将服务器符号转换为符号});}

GET 将返回一个 ServerSymbols 列表

导出接口 ServerSymbols {身份证号码;符号:字符串；系列:字符串；isin:字符串；created_at: 字符串；updated_at: 字符串；}

将 ServerSymbols 对象转换为 Symbols 对象:

convertFromServer(serverSymbols: ServerSymbols): Symbols {返回新符号(serverSymbols.symbol，serverSymbols.series，serverSymbols.isin，serverSymbols.created_at)；}

I have a API returning following data:

[
  {
    "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"
  }
]   

I wish to parse this response from api in angular. I am able to log the data in console but not able to map in the datatype.

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

    });
  }

} 

My model file looks like this:

export class Symbols {

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

  }

}

After getting response from the API i need to populate the result in allSymbols variable.

解决方案

You JSON object properties are not 100% mapping for Symbols, you have to convert it.

Here's an example, interface ServerSymbols contains all properties of the JSON object, now you can modify fetchListOfAllSymbol() as:

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

GET would return a list of ServerSymbols

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

Convert ServerSymbols object to Symbols object:

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

这篇关于以角度从 API 解析 JSON strnig的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！