Create complex array from array in React

Question

{
                           "chartOptions": {
                                "type": "line",
                                "isStacked": false, 
                                "minValue": 0,
                                "maxValue": 600000, 
                                "filled": false,
                                "showAxis": true,
                            "chartLabels":[
                                "May 23",
                                "May 24",
                                "May 25",
                                "May 26",
                                "May 27",
                                "May 28"
                            ],
                            "chartDatasets": [
                                {
                                    "label": "Mentions",
                                    "backgroundColor": "rgb(81, 45, 168)",
                                    "stack": "Stack 0",
                                    "data": [
                                        1100,
                                        800,
                                        750,
                                        1200,
                                        400,
                                        600
                                    ]
                                }
                            ]
                        },

Thats the original array I have from backend and now I want to build something like this:

const data = { labels: ['May 23', 'May 24', 'May 25', 'May 26', 'May 27', 'May 28'], datasets: [{ label: 'Mentions', borderDash: [5, 3], data: [6500, 5900, 8000, 8100, 5600, 10000] }] }

So the chartDatasets will be datasets and the chartLabels will be labels.. I think this is pretty easy but I don't know how I can do it.

I'm saving the original array in state so..

Thanks

Shubham Verma · Accepted Answer · 2020-09-25 15:06:22Z

If you have to modify single time you can simply assign in object like this:

const data = {
                           "chartOptions": {
                                "type": "line",
                                "isStacked": false, 
                                "minValue": 0,
                                "maxValue": 600000, 
                                "filled": false,
                                "showAxis": true,
                                },
                            "chartLabels":[
                                "May 23",
                                "May 24",
                                "May 25",
                                "May 26",
                                "May 27",
                                "May 28"
                            ],
                            "chartDatasets": [
                                {
                                    "label": "Mentions",
                                    "backgroundColor": "rgb(81, 45, 168)",
                                    "stack": "Stack 0",
                                    "data": [
                                        1100,
                                        800,
                                        750,
                                        1200,
                                        400,
                                        600
                                    ]
                                }
                            ]
                        }
                        
const modifiedData = {
labels:data.chartLabels,
datasets:data.chartDatasets,
}
console.log(modifiedData)

updated according to your requirement adding extra key in data set.

const data = {
                               "chartOptions": {
                                    "type": "line",
                                    "isStacked": false, 
                                    "minValue": 0,
                                    "maxValue": 600000, 
                                    "filled": false,
                                    "showAxis": true,
                                    },
                                "chartLabels":[
                                    "May 23",
                                    "May 24",
                                    "May 25",
                                    "May 26",
                                    "May 27",
                                    "May 28"
                                ],
                                "chartDatasets": [
                                    {
                                        "label": "Mentions",
                                        "backgroundColor": "rgb(81, 45, 168)",
                                        "stack": "Stack 0",
                                        "data": [
                                            1100,
                                            800,
                                            750,
                                            1200,
                                            400,
                                            600
                                        ]
                                    }
                                ]
                            }
                            
    const modifiedData = {
    labels:data.chartLabels,
    datasets:data.chartDatasets.map(set => ({...set, yAxisID:"bar-y-axis"})),
    }
    console.log(modifiedData)

I want to add this option "yAxisID: "bar-y-axis", inside Datasets how can I do that?

Harsh Makadia · Accepted Answer · 2020-09-25 14:42:21Z

This could be the easiest thing to do.

const MainData = {
   "chartOptions": {
        "type": "line",
        "isStacked": false, 
        "minValue": 0,
        "maxValue": 600000, 
        "filled": false,
        "showAxis": true,
        },
    "chartLabels":[
        "May 23",
        "May 24",
        "May 25",
        "May 26",
        "May 27",
        "May 28"
    ],
    "chartDatasets": [
        {
            "label": "Mentions",
            "backgroundColor": "rgb(81, 45, 168)",
            "stack": "Stack 0",
            "data": [
                1100,
                800,
                750,
                1200,
                400,
                600
            ]
        }
    ]
}
         
// converting it to required format         
const RequiredData = {
  labels:MainData.chartLabels,
  datasets:MainData.chartDatasets,
}

// output
console.log(RequiredData)

Murilo Fernandes · Accepted Answer · 2020-09-25 14:40:57Z

1

if I understand correctly, you should do something like this to create your custom object

const data = {};
data.labels = YOUR_STATE.chartOptions.chartLabels;
const dataArray = [];
for(let i=0; YOUR_STATE.chartDatasets.length; i++){
  dataArray.push({
    label: YOUR_STATE.chartDatasets[i].label,
     borderDash: [5, 3],
     data: YOUR_STATE.chartDatasets[i].data
  })
}
data.datasets = dataArray;

maybe has an option more optimized, but I thinks this will work for you

answered Sep 25, 2020 at 14:40

Murilo Fernandes

717 bronze badges

Collectives™ on Stack Overflow

Create complex array from array in React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related