javascript - 如何使用 JavaScript 格式化 JSON 数据

Question

我正在使用 Google Chart 在“UI”上呈现面积图，我的后端有一个 JSON 数据，它与我想从 JavaScript 端将该数据格式化为所需的 JSON 格式并不完全相同。

这是我从后端获取的 JSON

     [
      [
        "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"
  ]
]

到目前为止我所做的是

    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;

通过这样做，我独立地拥有了所有账单日期网点和金额，但不知道如何进一步做到这一点

我想要的预期结果:

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>

所以我想要实现的是从后端获取数据并按照我想要呈现图表的方式对其进行格式化。

我通过创建一个新函数 formatData 并单独存储所有数据来做正确的事情，但不知道下一步该做什么。

任何人请帮助我，我已经提供了我从后端获得的 J SON 和我想要成为的 J SON。

Answer 1

我认为这可以实现您需要的转换:

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)