將json資料轉換為物件

美好的一天開發者！

我在從 MVC 控制器接收到 AJAX 成功請求的 JSON 物件中遇到問題。

收到的回復如下。

[
  {"name":"ERP Developer","value":2},
  {"name":"Software Engineer","value":2},
  {"name":"Dot Net Developer","value":2},
  {"name":"Apex Developer","value":0},
  {"name":"test","value":1}
]

但我想讓它像下面一樣。

{
  "name": [
    "ERP Developer",
    "Software Engineer"
  ],
  "Value": [
    5,
    10
  ]
}

問題：因為我正在使用 ECHARTS 庫創建條形圖，但我想要系列名稱而不是數字，請參見下圖以供參考。

function loadBarChart(data,title = "JobData",subtext = "Artistic Milliners") {
    //var BarDBData = data;
    var BarDBData = data;
    
    

    //var BarDBData = JSON.parse('{"name":["ERP Developer","TEST"],"test":[5,10]}');
  
 
    console.log(BarDBData);
   
 
    
    var chartDom = document.getElementById('BarChart');
 
    var myChart = echarts.init(chartDom);

    var option;

    option = {
        title: {
            text: title,
            subtext: subtext
        },
        tooltip: {
            trigger: 'axis'
        },
   
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
               
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                // prettier-ignore
                //data: ["ERP Developer", "Software Engineer"],
                data: BarDBData,
                axisLabel: { interval: 0, rotate: 30 }
            }
        ],
        yAxis: [
            {
                type: 'value'
                
            }
        ],
        dataZoom: [
            {
                show: true,
                start: 04,
                end: 100
            },
            {
                type: 'inside',
                start: 44,
                end: 100
            },
            {
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
        series: [
            {
                name: "test",
                type: 'bar',
                data: BarDBData,
                //data: [2.0, 4.9, 4, 9, 4],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                }
  
            }
        ]
    };

    option && myChart.setOption(option);



}

uj5u.com熱心網友回復：

您可以通過陣列進行映射并將值提取到另一個陣列中

const result = {}
const arr = [{"name":"ERP Developer","value":2},{"name":"Software Engineer","value":2},{"name":"Dot Net Developer","value":2},{"name":"Apex Developer","value":0},{"name":"test","value":1}]

arr.forEach(row => {
    for (let i in row) {
    if (result[i]) {
        result[i].push(row[i])
    } else {
        result[i] = [row[i]]
    }
  }
})
console.log(result)

uj5u.com熱心網友回復：

只是reduce()它成所需的形狀：

const response = [
  {"name":"ERP Developer","value":2},
  {"name":"Software Engineer","value":2},
  {"name":"Dot Net Developer","value":2},
  {"name":"Apex Developer","value":0},
  {"name":"test","value":1}
];

const mapped = response.reduce(
  (acc,x) => {
    acc.name.push(  x.name  );
    acc.Value.push( x.value );
    return acc;
  },
  { name: [], Value: [] }
);

uj5u.com熱心網友回復：

在 ES6 上可以通過 reduce 和 spread 輕松完成。

const originalArr =  [{"name":"ERP Developer","value":2},{"name":"Software Engineer","value":2},{"name":"Dot Net Developer","value":2},{"name":"Apex Developer","value":0},{"name":"test","value":1}];
const updatedArr = originalArr.reduce((arr, entry) => {
  arr.name = [...arr.name, entry.name];
  arr.value = [...arr.value, entry.value];
  return arr;
}, {name: [], value: []});
console.log(updatedArr);

標籤：

上一篇：如何根據匹配的鍵將物件移動到陣列內部的頂部

下一篇：使用for回圈和if條件查找組態檔