How to modify JSON labels React JS

Question

I'm trying to add a chart in a ReactJS page. In the same page I've got the data in a table and I would like that those data were the same of my chart. My chart is like this:

export const myDataSourcePie ={
    chart: {
        caption: "Title",
        subcaption:  "Friends' chart",
        startingangle: "120",
        showlabels: "0",
        showlegend: "1",
        enablemultislicing: "0",
        slicingdistance: "15",
        showpercentvalues: "1",
        showpercentintooltip: "0",
        plottooltext: "Friend's email : $label Total messages : $datavalue",
        theme: "ocean"
},
    data: [
        {
            label: 'email',
            value: '17',
        },
        {
            label: 'email',
            value: '100',
        },
        {
            label: 'email',
            value: '17',
        },
        {
            label: 'email',
            value: '17',
        },
        {
            label: 'email',
            value: '17',
        },
        {
            label: 'email',
            value: '17',
        },
        {
            label: 'email',
            value: '100',
        },
        {
            label: 'email',
            value: '17',
        },
]
}

export const chartConfigs = {
    type: 'pie3d',
    width: 800,
    height: 600,
    dataFormat: 'json',
    dataSource: myDataSourcePie
};

and I import it and then render it with

<ReactFC {...chartConfigs} />

now obviously the data inside my JSON are not the right data. I've got a "friends" object list

    friends:[
     {"first_name": "name",
      "surname": "surname",
      "email": "foo@foo.com",
      "date_of_birth": "1982-02-20",
      "nationality": "Japan",
      "messages": 5
      },
{...},
{...},
..
]

from which I get the data to put in the table and I would like to get only two label of this object list to put in the chart (email and messages). How could I put this value inside my "myDataSourcePie"? With props? Thank you

score 1 · Accepted Answer · answered May 28 '18 at 08:33

Try this:

getFriendsChart()
    {
        let dataChart = [];

        this.state.friends.forEach( function( friend ) {

            dataChart.push(
                {
                    label: friend.email,
                    value: friend.messages,
                }
            );
        });

        let tempConfig = {...chartConfigs};     
        tempConfig.dataSource.data = dataChart;

        return tempConfig;
    }

How to modify JSON labels React JS

1 Answers1