Good Day Developers!
I'm facing issue in JSON object received from MVC controller to AJAX success request.
The response which received is below.
[
{"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}
]
But i want to make it like below.
{
"name": [
"ERP Developer",
"Software Engineer"
],
"Value": [
5,
10
]
}
Problem: Because i'm creating Bar chart using ECHARTS library but i want series name instead of number please see below image for reference.
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); }
you can just map through array and extract values into another array
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)
Just reduce()
it into the desired shape:
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: [] }
);
On ES6 can be easily done with reduce and spreading.
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.