Unable to pass on data from json file to labels and datasets in chart.js

Question

I'm trying to load JSON data externally and pass it on to datasets and labels.

When I start the server I see the data being called in developer options, however, the same does not reflect in the bar graph.

I tried using fetch function to call my API but I don't know how to call it into the labels (which represent X-axis in chart.js) and to datasets (which represent the Y-axis in chart.js).

Moreover, I am unaware how to call an array data. I am calling the chartData into another chart file in which I have created a chart with all properties of bar and trying to call this chartData into my bar chart data using props.

Please correct me where I've been doing it wrong. Below is my code.

getChartData(){
    //Ajax calls here
    return fetch('https://api.myjson.com/bins/l5pw3')
             .then((response)=> response.json())
             .then((responseJson) => {
                 this.setState({
                     //chartData:responseJson.keywordData
                     chartData: {
                         labels: [responseJson.keywordData.category],
                         datasets:[
                             {
                                 label: 'spectra',
                                 data [responseJson.keywordData.noOfSpectra],
                                 backgroundColor:[
                                      'rgba(255, 99, 132, 0.6)'
                                 ]
                             }
                          ]
                      }

                  });
                  console.log(this.state.chartData)
              });
}

render() {
     return (
           <div className="App">
            <Chart chartData={this.state.chartData} />
           </div>
     );
}

export default App;

Answer 1

It was a little bit hard to understand what you meant, but as I understood, you wanted:

y - datasets x - categories

and all datasets show the spectra property.

If I understood it correctly, the problem was that you didn't map the properties to the corresponding fields: for example: labels: [responseJson.keywordData.category] , should be more like labels: responseJson.keywordData.map(k => k.category) , because you cannot explicitly state that all the fields are mapped and looped automatically.

The same was for the spectra property, you have to then map each object from the response and extract the spectra property ( you can now take only one value, cause there is only one spectra , but in the future, if there are more, you will have to map)

I am adding a codesandbox example (a little notes in forward: for fetch I used axios (my own preferance, there is no difference) (you were using react, so I imported react-chartjs-2 )

Code Sanbox Link: https://codesandbox.io/s/qk0r930p89

Hope it helps!