JavaScript Plotly unable to populate JSON object to bar graph in html

Question

I currently have data from a JSON file that I am importing into my app.js file. I want to be able to plot a very simple bar graph but for some reason, the data isn't plotting at all.

My JSON file looks like this {"value": [44.0, 42.0, 41.0, 40.0, 38.0, 37.0, 36.0], "score": [1, 2, 6, 3, 7, 11, 121]}

Here is my code:

var value = [];
var score = [];

d3.json("../static/assets/js/data.json", function(data) {
        console.log(data);

        value.push(data.value)
        
        console.log(value) // shown on console as [Array(7)]

        score.push(data.score)
        
        console.log(score) // shown on console as [Array(7)]
        
    })

console.log(value) //shows up on the console as []
                                             // 0: (7) [44, 42, 41, 40, 38, 37, 36]
                                             // length: 1
                                             // __proto__: Array(0)

console.log(score) //shows up on the console as []
                                             // 0: (7) [1, 2, 6, 3, 7, 11, 121]
                                             // length: 1
                                             // __proto__: Array(0)

var trace = {
    x: value,
    y: score,
    type: "bar"
};

Plotly.newPlot('myDiv', [trace])

I'm not worried about aesthetics at the moment as I want to be able to plot the chart first.

When I console.log([trace]), I get

[{...}]
 0: {x: Array(1), y: Array(1), type: "bar"}
     type: "bar"
    x: [Array(7)]
       0 : (7) [44, 42, 41, 40, 38, 37, 36]
    y: [Array(7)]
       0 : (7) [1, 2, 6, 3, 7, 11, 121]
    __proto__: Object
    length: 1
 __proto__: Array(0)

when I know the result should be

[{...}]
 0: {x: Array(7), y: Array(7), type: "bar"}
     type: "bar"
    x: (7) [44, 42, 41, 40, 38, 37, 36]
    y: (7) [1, 2, 6, 3, 7, 11, 121]
    __proto__: Object
    length: 1
 __proto__: Array(0)

I am a beginner in JavaScript and I'm a little stuck as to what my error might be that is causing this.

Answer 1

You have two possible erros in your code:

1. By using value.push(data.value) you are creating nested arrays. So instead of [1,2,3] , which you would achieve by writing value = data.value , your array is [[1,2,3]] .
2. d3.json is an asynchronous call, which means that your data will only safely be available once the callback function is called ( function(data) {} ). You should put the code which generates the chart into the callback function.

See the example below. I emulated d3.json with my jsonRequest function, you can ignore that part. By putting the plotly call into the callback function, you can omit the value and score arrays and just access data.value and data.score directly.

 const mockJson = { value: [44, 42, 41, 40, 38, 37, 36], score: [1, 2, 6, 3, 7, 11, 121] } const jsonRequest = function() { return new Promise(function(resolve) { setTimeout(function(){ resolve(mockJson) }, 2000); }); } jsonRequest().then(function(data) { var trace = { x: data.value, y: data.score, type: "bar" }; Plotly.newPlot('myDiv', [trace]) } )

 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <div id="myDiv"></div>