How do I iterate through an Array of Objects and display each objects into a Chart?

Question

I am trying to create a dashboard using React, The first part is showing my local API data. This is being fetched from the front end using ComponentDidMount and using splice to only use the METRIC = SPEND. I am trying to grab only the first object of this data and use the PRODUCT and UPLIFT to create a chart. Google-charts requires data like this https://react-google-charts.com/bar-chart#basic-bar-chart-with-multiple-series

Any ideas on how I can do this? I have tried to map over the array but as you can see in the last part of the code, it is looping over the array and creating three charts instead of putting all the data into one chart.

I am using react-google-charts for create my chart.

  "error": false,
  "data": [
    {
      "id": 1,
      "METRIC": "Spend",
      "PRODUCT": "Offer",
      "EXPOSED": 62717.14,
      "CONTROL": 56355.78,
      "UPLIFT": 6361.36,
      "PCT_UPLIFT": 0.11
    },
    {
      "id": 2,
      "METRIC": "Spend",
      "PRODUCT": "Brand",
      "EXPOSED": 1037739.72,
      "CONTROL": 979580.56,
      "UPLIFT": 58159.16,
      "PCT_UPLIFT": 0.06
    },
    {
      "id": 3,
      "METRIC": "Spend",
      "PRODUCT": "Aisle",
      "EXPOSED": 4084428.18,
      "CONTROL": 3880807.25,
      "UPLIFT": 203620.93,
      "PCT_UPLIFT": 0.05
    },
    {
      "id": 4,
      "METRIC": "Units",
      "PRODUCT": "Offer",
      "EXPOSED": 25117.02,
      "CONTROL": 22537.94,
      "UPLIFT": 2579.08,
      "PCT_UPLIFT": 0.11
    },
    {
      "id": 5,
      "METRIC": "Units",
      "PRODUCT": "Brand",
      "EXPOSED": 506365.64,
      "CONTROL": 479277.36,
      "UPLIFT": 27088.28,
      "PCT_UPLIFT": 0.06
    },
    {
      "id": 6,
      "METRIC": "Units",
      "PRODUCT": "Aisle",
      "EXPOSED": 1771305.29,
      "CONTROL": 1682430.67,
      "UPLIFT": 88874.62,
      "PCT_UPLIFT": 0.05
    },
    {
      "id": 7,
      "METRIC": "Visits",
      "PRODUCT": "Offer",
      "EXPOSED": 22661.99,
      "CONTROL": 20480.76,
      "UPLIFT": 2181.23,
      "PCT_UPLIFT": 0.11
    },
    {
      "id": 8,
      "METRIC": "Visits",
      "PRODUCT": "Brand",
      "EXPOSED": 413568.96,
      "CONTROL": 391852.96,
      "UPLIFT": 21716,
      "PCT_UPLIFT": 0.06
    },
    {
      "id": 9,
      "METRIC": "Visits",
      "PRODUCT": "Aisle",
      "EXPOSED": 1220181.72,
      "CONTROL": 1161775.92,
      "UPLIFT": 58405.8,
      "PCT_UPLIFT": 0.05
    },
    {
      "id": 10,
      "METRIC": "Total_custs",
      "PRODUCT": "Offer",
      "EXPOSED": 15827,
      "CONTROL": 14346.53,
      "UPLIFT": 1480.47,
      "PCT_UPLIFT": 0.1
    },
    {
      "id": 11,
      "METRIC": "Total_custs",
      "PRODUCT": "Brand",
      "EXPOSED": 301593,
      "CONTROL": 282900.38,
      "UPLIFT": 18692.62,
      "PCT_UPLIFT": 0.07
    },
    {
      "id": 12,
      "METRIC": "Total_custs",
      "PRODUCT": "Aisle",
      "EXPOSED": 795653,
      "CONTROL": 749896.76,
      "UPLIFT": 45756.24,
      "PCT_UPLIFT": 0.06
    }
  ],
  "message": "top table"
}


import React from 'react';
import { Chart } from 'react-google-charts';
import './App.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      top_spend: []
    }
  }
  componentDidMount() {
    fetch('http://localhost:3000/top')
      .then(response => response.json())
      .then(data => {
        this.setState({top_spend: data.data.splice(0,3)}, () => {
          console.log("Top_Spend", this.state.top_spend);
        })
      })
  }
  render() {
    let top = this.state.top_spend;

    return (
      <div className="App">
        {top.map(function(name, index) {
          return (
            <div key={index}>
              <Chart
                height={'300px'}
                width={'400px'}
                chartType="Bar"
                loader={<div>Loading Chart</div>}
                data={[
                  ['', 'UPLIFT', 'PCT_UPLIFT'],
                  [name.PRODUCT, name.UPLIFT, name.PCT_UPLIFT],
                ]}
                options={{
                  chart: {
                    title: 'Company',
                  },
                  chartArea: {width: '50%'},
                  isStacked: true,
                }}
              />
            </div>
          )
        })}
      </div>
    );
  }
}

export default App;

Answer 1

So the issue here is that you are iterating over data, thus making a chart for each entry when, if I understand correctly, you want to combine it all into one chart. So instead of iterating over data directly, you would want to iterate over data in the prop passed to Chart. So the code would look something like this

<Chart
  data={[
    ['', 'UPLIFT', 'PCT_UPLIFT'],
    ...data.map(d => [ d.PRODUCT, d.UPLIFT, d.PCT_UPLIFT ])
  ]}
/>