Trouble pulling data from JSON

JordanMarsh · October 18, 2018, 6:56pm

working on D3 project:
https://learn.freecodecamp.org/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart

I’m struggling being able to read in the JSON data with:

d3.json("https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json", function(data) {
  console.log(data.data[0])  
});

the console shows nothing, and if I try to work with (data) it appears to not be working. What am I doing wrong?

EddieCornelious · October 19, 2018, 4:21pm

Try it like this.

d3.json(“https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json”).then((data)=>console.log(data.data[0]))

I logged d3.json function after invoked with url argument and saw a promise so I figured it was “thenable”

They must’ve changed it since verison 4. I tried to look through the docs for about 10 seconds to find the actual documentation to see what else they might’ve added but I remembered d3’s docs gave me nightmares, so I’ll leave the rest to you.

JordanMarsh · October 19, 2018, 4:22pm

Any idea why it wouldn’t work without “then”? The example they provide uses d3.json without it:

EddieCornelious · October 19, 2018, 6:37pm

Yes. I stated why I think it’s not working. That FCC example is using version 4.2.2. I’m assuming you are using 5 or greater and that’s why the json call wasn’t working in that fashion.

EDIT : Here you go:

github.com

d3/d3/blob/master/CHANGES.md

# Changes in D3 5.0

[Released March 22, 2018.](https://github.com/d3/d3/releases/tag/v5.0.0)

D3 5.0 introduces only a few non-backwards-compatible changes.

D3 now uses [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Using_promises) instead of asynchronous callbacks to load data. Promises simplify the structure of asynchronous code, especially in modern browsers that support [async and await](https://javascript.info/async-await). (See this [introduction to promises](https://beta.observablehq.com/@mbostock/introduction-to-promises) on [Observable](https://beta.observablehq.com).) For example, to load a CSV file in v4, you might say:

```js
d3.csv("file.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});
```

In v5, using promises:

```js
d3.csv("file.csv").then(function(data) {
  console.log(data);

This file has been truncated. show original