How to format JSON data using JavaScript

Question

I'm working on Google Chart to render Area chart on 'UI' I have a JSON Data from my back-end which is not exactly the same i want to format that data into required JSON format from JavaScript end.

so here is my JSON which i am getting from my back-end

     [
      [
        "JAYANAGAR",
        "2018-09-01",
        "476426"
      ],
      [
        "MALLESHWARAM",
        "2018-09-01",
        "92141"
      ],
      [
        "KOLAR",
        "2018-09-01",
        "115313"
      ],
      [
        "JAYANAGAR",
        "2018-09-02",
        "511153"
      ],
      [
        "MALLESHWARAM",
        "2018-09-02",
        "115704"
      ],
      [
        "KOLAR",
        "2018-09-02",
        "83597"
      ],
      [
        "JAYANAGAR",
        "2018-09-03",
        "167421"
      ],
      [
        "KOLAR",
        "2018-09-03",
        "53775"
      ]
    ]

what I am trying to achieve is J SON like THIS

    [
  [
    "Billdate",
    "Jayanagar",
    "Malleshwaram",
    "Kolar"
  ],
  [
    "01-09-2018",
    "476426",
    "92141",
    "115313"
  ],
  [
    "02-09-2018",
    "511153",
    "115704",
    "83597"
  ],
  [
    "03-09-2018",
    "167421",
    "0",
    "53775"
  ]
]

What i have done till now is

    let formatData = function (data) {
                    let billdates = [];
                    let outlets = [];
                    data.forEach(element => {
                        if (billdates.indexOf(element.billdate) == -1) {
                            billdates.push(element.billdate);
                        }
                        if (outlets.indexOf(element.outlet) == -1) {
                            outlets.push(element.outlet);
                        }
                    });
                    return {
                        data: data,
                        billdates: billdates,
                        outlets: outlets,

                    };
                };
 let renderCHart = function (data) {
                    billdates = data.billdates;
                    outlets = data.outlets;
                    data = data.data;

By doing this i have all the billdates outlets and amounts independently but not getting any ideas how to do it further

Expected outcome I want:

 const raw = [ [ "JAYANAGAR", "2018-09-01", "476426" ], [ "MALLESHWARAM", "2018-09-01", "92141" ], [ "KOLAR", "2018-09-01", "115313" ], [ "JAYANAGAR", "2018-09-02", "511153" ], [ "MALLESHWARAM", "2018-09-02", "115704" ], [ "KOLAR", "2018-09-02", "83597" ], [ "JAYANAGAR", "2018-09-03", "167421" ], [ "KOLAR", "2018-09-03", "53775" ] ] let types = new Set(); const rawObj= raw.reduce((memo, [type, date, value]) => { date = date.split('-').reverse().join('-'); memo[date] = memo[date] || {}; memo[date][type] = parseInt(value); types.add(type); return memo; }, {}); types = [...types]; const data = Object.entries(rawObj).reduce((memo, [date, value]) => { memo.push([date, ...types.map(type => value[type] || 0)]); return memo; }, [['Billdate', ...types.map(type => `${type[0]}${type.substr(1).toLowerCase()}`)]]); google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(data); var options = { title: 'Outlet Wise Sales', legend: { position: 'bottom',}, hAxis: {title: 'Billdate', titleTextStyle: {color: 'black'}}, pointSize: 7, vAxis: {title: 'Quantity', titleTextStyle: {color: 'black'}} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script> <div id="chart_div"></div> 

So what i am trying to achieve is that getting the Data from back-end and format it in the way i want to render the chart.

I am doing the right thing by creating a new function formatData and storing all data individually but don't know what to do next.

any one out there please help me out, i have provided both the J SON the on which i am getting from back-end and the one i want to be as.

Answer 1

I think this does the transform you need:

 const raw = [ [ "JAYANAGAR", "2018-09-01", "476426" ], [ "MALLESHWARAM", "2018-09-01", "92141" ], [ "KOLAR", "2018-09-01", "115313" ], [ "JAYANAGAR", "2018-09-02", "511153" ], [ "MALLESHWARAM", "2018-09-02", "115704" ], [ "KOLAR", "2018-09-02", "83597" ], [ "JAYANAGAR", "2018-09-03", "167421" ], [ "KOLAR", "2018-09-03", "53775" ] ] let types = new Set(); const rawObj= raw.reduce((memo, [type, date, value]) => { date = date.split('-').reverse().join('-'); memo[date] = memo[date] || {}; memo[date][type] = parseInt(value); types.add(type); return memo; }, {}); types = [...types]; const data = Object.entries(rawObj).reduce((memo, [date, value]) => { memo.push([date, ...types.map(type => value[type] || 0)]); return memo; }, [['Billdate', ...types.map(type => `${type[0]}${type.substr(1).toLowerCase()}`)]]); console.log(data)