Using nested JSON data in D3

Question

My react app makes an API call to grab some stock price data in JSON format.

[![enter image description here][1]

I don't know how to access each nested date's values and use them to make a chart. What would be the best way to go about this?

Any advice would be appreciated. Thanks!

Mikkel · Accepted Answer · 2020-01-18 08:20:31Z

2

Not sure how you want to chart this data. I'll assume for now that you are only interested in close prices.

You can use a javascript feature "map" to get the data into an easier shape for D3 to handle

// Assuming data is in a variable called data
// map over the keys (dates)
const cleaned = Object.keys(data.history).map(date => {
    return {
        date,
        close: data.history[date].close
    }
})

Your resulting data will be an array like this:

[  {
  "date": "2020-01-16",
  "close": "23.45"
  },
  {
  "date": "2020-01-17",
  "close": "25.15"
  },
  {
  "date": "2020-01-18",
  "close": "23.99"
  },
]

Does this help?

answered Jan 18, 2020 at 8:20

Mikkel

7,7773 gold badges20 silver badges32 bronze badges

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

7 Comments

jayjey Over a year ago

Hey thanks for your comment! Actually I want to create a candlestick chart using all of the values, but I was just unsure how to get started with this data structure. How do I iterate through these dates? I'm new to d3. I used fetch successfully but I see there is a d3.json option.

Mikkel Over a year ago

You can use d3.json(), d3 has a few "convenience" methods like this to make it "easier", but it's pretty much equivalent to using fetch

jayjey Over a year ago

Hey! I edited my question. If you have a minute would really appreciate some advice on how to structure and parse the data in this fetch request. I used your method and it works but I am not sure how to implement it in the request .then

Mikkel Over a year ago

Did you morph this question into something different, or did you just add a bunch of stuff to it?

jayjey Over a year ago

I just added an edit. The js file I added parses TSV data. I was wondering if I could instead fetch the JSON data and use the mapping code you provided then pass it using d3.json instead of `tsvParse. Thanks for replying btw

|

Collectives™ on Stack Overflow

Using nested JSON data in D3

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related