Question 198125 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

How to parse JSON object in Angular

I am trying to invoke "https://restcountries.com/v3.1/all" from a Angular application and when displaying the results in the HTML page, i am able to parse Name, flag , capital but when tried to display Currency its showing as [object object]

Here is the code i have written in html

<tbody>
    <tr *ngFor="let c of data">
      <td>{{ c.name.common }}</td>
      <td>{{ c.capital }}</td>
      <td>{{ c.flag }}</td>
       <td>{{ c.currencies }}</td>
    </tr>
  </tbody>

Here is the code i have written in Service

 public getContrires():any {
    return this._httpClient.get('https://restcountries.com/v3.1/all');
  }

Result in HTML output coming as below

enter image description here

Thanks in advance.

I tried below in the html but still no luck

<td *ngFor="let cur of c.currencies">{{ curr.name }}</td>
Tags:

2

Answers


  1. 0

    You could iterate object properties using keyvalue pipe

    Transforms Object or Map into an array of key value pairs.

    It is the best approach since a country can adopt more then a single currency

    enter image description here

    <ul>
  <li *ngFor="let c of products">
    {{ c?.name?.official }} <br />
    <div *ngFor="let d of c?.currencies | keyvalue">
      {{ d.value['name'] }} - {{ d.value['symbol'] }}
    </div>
  </li>
</ul>

    Please have a look at this stackblitz

    Login or Signup to reply.
  2. 0

    c.currencies is INDEED a nested object. In order to get the symbol of the currencies, you need to drill to that object. Like so:

    <td>{{ c.currencies[Object.keys(c.currencies)[0]].symbol }}</td>

    Hope that answers your question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search