[英]How to format JSON data using JavaScript
我正在Google Chart上渲染“ UI”上的Area chart,我从后端获得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以及我想成为的那个。
我认为这可以完成您需要的转换:
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.