Question

我正在使用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和我希望成为的那个。

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)

如何使用JavaScript格式化JSON数据

1 个答案: