skip to Main Content

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>

2

Answers


  1. 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. 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