Convert json data to object

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. enter image description here

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



}

Solution 1:

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)

Convert json data to object

Solution 1:

Related

Recent Posts