將 json 數據轉換為 object

Question

美好的一天開發者！

我在從 MVC controller 收到的 JSON object 到 ZA34A6659BCEAE779F281185E 成功請求中遇到問題。

收到的回復如下。

[
  {"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); }

Answer 1

您可以通過數組僅 map 並將值提取到另一個數組中

 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)

Answer 2

只需將其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: [] }
);

Answer 3

在 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);