1

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.

Improve this question

2 Answers 2

Reset to default
1

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

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

1 Comment

Thank you that answered my question. If I wanted to use the contents of data.bpi[key] in the same component to fill an array, do you know how I would go about that? (Assuming 'data' is the same content, but from an actual JSON response and not just copy/pasted in the component)
1

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

Improve this answer

1 Comment

Thank you that answered my question. If I wanted to use the contents of data.bpi[key] in the same component to fill an array, do you know how I would go about that? (Assuming 'data' is the same content, but from an actual JSON response and not just copy/pasted in the component)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.