CODEWITHSUNDEEP
jsonangularobjectnested
zahnzy
zahnzy

Reputation: 247

Angular 2 accessing an entire nested object within an object

I'm trying to figure out how to access the contents of an object within a JSON response. The format is as follows:

https://api.coindesk.com/v1/bpi/historical/close.json

{"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

If I wanted to display every key and its respective content (specifically the date and time combinations from bpi), how would I go about doing that in Angular 2? I have tried using Object.keys, however it only returns bpi, time, and updated without their contents.

Upvotes: 1

Views: 1556

Answers (2)

jitender
jitender

Reputation: 10429

You Have Object.keys accessible in the template and use it in *ngFor.

objectKeys = Object.keys;
  data = {"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

<ul>
  <li *ngFor='let key of objectKeys(data.bpi)'>
   Key: {{key}}, value: {{data.bpi[key]}}
  </li>
</ul>

Working demo

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58603

For Angular 2 :

as @jitender answered

// Component Side :
objectKeys = Object.keys;
data = {"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

// Template Side :
<ul>
  <li *ngFor='#key of objectKeys(data.bpi)'>
   Key: {{key}}, value: {{data.bpi[key]}}
  </li>
</ul>

For Angular 2+ (4/5):

#key is deprecated in newer version of angular , so you have to use let key instead of #key

// Component Side :
objectKeys = Object.keys;
data = {"bpi":{"2017-10-03":4320.09,"2017-10-04":4225.9238,"2017-10-05":4322.755,"2017-10-06":4370.245,"2017-10-07":4437.0338,"2017-10-08":4596.9625,"2017-10-09":4772.975,"2017-10-10":4754.6988,"2017-10-11":4830.7663,"2017-10-12":5439.1338,"2017-10-13":5640.1275,"2017-10-14":5809.6938,"2017-10-15":5697.3917,"2017-10-16":5754.2213,"2017-10-17":5595.235,"2017-10-18":5572.1988,"2017-10-19":5699.5838,"2017-10-20":5984.0863,"2017-10-21":6013.2288,"2017-10-22":5984.9563,"2017-10-23":5895.2988,"2017-10-24":5518.85,"2017-10-25":5733.9038,"2017-10-26":5888.145,"2017-10-27":5767.68,"2017-10-28":5732.825,"2017-10-29":6140.5313,"2017-10-30":6121.8,"2017-10-31":6447.6675,"2017-11-01":6750.1725,"2017-11-02":7030.0025},"disclaimer":"This data was produced from the CoinDesk Bitcoin Price Index. BPI value data returned as USD.","time":{"updated":"Nov 3, 2017 00:03:00 UTC","updatedISO":"2017-11-03T00:03:00+00:00"}}

// Template Side :
<ul>
  <li *ngFor='let key of objectKeys(data.bpi)'>
   Key: {{key}}, value: {{data.bpi[key]}}
  </li>
</ul>

Here is the link to working demo :

https://stackblitz.com/edit/angular-json-key-loop

Upvotes: 1

Related Questions