Make a for loop to show data object from API in render using Charts Reactjs

Question

I need to show some data from API in the Chart Reacts (https://canvasjs.com/react-charts/chart-index-data-label/)

This is my API in front:

 //API Gains stats
           fetch(`${API}/api/gains/getstatgains` 
        ,{
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'authorization': `Bearer ${tok}`
            }
        })
        .then(results => {
            return results.json();
        })
        .then(res => {
            var statsgains = res.result;
              if(res.success === true){
                // console.log("chart ", res);
                for (var i = 0; i< statsgains.length; i++){
                    this.setState({ gains_label: statsgains[i]._id });
                    this.setState({ gains_used: statsgains[i].total });
                    // console.log("gains utilisés : ", statsgains[i].total);
                    // console.log("gains utilisés : ", statsgains[i]._id);
                }
              }
        })

And this is the Chart code in render():

var { gains_used, gains_label } = this.state;

 //Gains stats
         const options_gains = {
            animationEnabled: true,
            exportEnabled: true,
            theme: "light2", //"light1", "dark1", "dark2"
            title:{
                text: "Simple Column Chart with Index Labels"
            },
            data: [{
                type: "column", //change type to bar, line, area, pie, etc
                //indexLabel: "{y}", //Shows y value on all Data Points
                indexLabelFontColor: "#5A5757",
                indexLabelPlacement: "outside",
                dataPoints: [
                    { x: 20, y: gains_used, indexLabel: gains_label }
                ]
            }]
         }

In Postman I have this result (http://localhost:3001/api/gains/getstatgains):

"success": true,
"message": "SUCCESS",
"result": [
    {
        "_id": "BBBBBBBBB",
        "total": 2
    },
    {
        "_id": "cccccccccc",
        "total": 1
    },
    {
        "_id": "AAAAAAAA",
        "total": 3
    }
]
}

I think I need to make a for loop in data to shows all the result, but in my browser the chart shows only "AAAAAAAA".

Answer 1

Just added this to explain comment. This would replace your last .then(), the one with the loop.

.then(({ result, success }) => success
    ? result.map(({ _id, total }) => ({ gains_label: _id, gains_used: total }))
    : []
).then(dataPoints => this.setState({ dataPoints }))

Now in render, you can just replace

var { gains_used, gains_label } = this.state;

with:

const { dataPoints } = this.state;

And instead of hard-coding like this:

            data: [{
                type: "column", //change type to bar, line, area, pie, etc
                //indexLabel: "{y}", //Shows y value on all Data Points
                indexLabelFontColor: "#5A5757",
                indexLabelPlacement: "outside",
                dataPoints: [
                    { x: 20, y: gains_used, indexLabel: gains_label }
                ]
            }]

Just do:

            data: [{
                type: "column", //change type to bar, line, area, pie, etc
                //indexLabel: "{y}", //Shows y value on all Data Points
                indexLabelFontColor: "#5A5757",
                indexLabelPlacement: "outside",
                dataPoints
            }]

Edit: to increment x by 10, try:

.then(({ result, success }) => success 
  ? result.map(({ _id, total }) => ({ x: 20, y: total, indexLabel: _id, }))
          .map((obj, i) => ({ ...obj, x: obj.x + (i * 10) }))
  : [] 
).then(dataPoints => this.setState({ dataPoints })) 

Or with reduce:

  .then(({ result, success }) => success
    ? result.reduce((arr, { _id, total }) => ([
      ...arr, {
        x: arr.length ? arr[arr.length - 1].x + 10 : 20,
        y: total, indexLabel: _id } ]), [])
    : [])
  .then(dataPoints => this.setState({ dataPoints }))