Parse JSON strnig from API in angular

Question

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.

try this this.http.get(this.apiUrl.getBaseUrl() + 'symbol').map(response => response.json()).subscribe(data => { console.log(data);}); — Rahul Sharma
– Rahul Sharma, Commented Mar 7, 2018 at 16:15

Haifeng Zhang · Accepted Answer · 2018-03-07 16:22:50Z

2

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

answered Mar 7, 2018 at 16:22

Haifeng Zhang

32.1k22 gold badges95 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Over a year ago

thank you worked perfectly for me. But is it mandatory to have 100% mapping. Don't we have any other dynamic way. If someone adds any one parameter in backend api then frontend api will be broken then. Is it true??

msanford Over a year ago

@Abhishek Yes, that's precisely what an interface is for: to guarantee field/type consistency. If someone adds a field to the backend, you will have to add it to the interface. You can create partials for various cases, though.

Collectives™ on Stack Overflow

Parse JSON strnig from API in angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related