在 React 中从数组创建复杂数组答案

【问题标题】：Create complex array from array in React在 React 中从数组创建复杂数组
【发布时间】：2021-01-11 21:41:33
【问题描述】：

{
                           "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 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] }] }

所以 chartDatasets 将是 datasets 而 chartLabels 将是 labels.. 我认为这很漂亮很简单，但我不知道该怎么做。

我将原始数组保存在状态所以..

谢谢

【问题讨论】：

标签： javascript arrays reactjs arraylist

【解决方案1】：

如果你必须修改一次，你可以像这样简单地分配对象：

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)

根据您的要求进行更新，在数据集中添加额外的键。

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)

【讨论】：

我想在数据集中添加这个选项 "yAxisID: "bar-y-axis", 我该怎么做？

【解决方案2】：

这可能是最简单的事情。

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)

【讨论】：

【解决方案3】：

如果我理解正确，你应该这样做来创建你的自定义对象

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;

也许有一个更优化的选项，但我认为这对你有用

【讨论】：