时间戳

首页 > 解决方案 > Vuejs如何创建一个新数组以传递给图形

javascript - Vuejs如何创建一个新数组以传递给图形

问题描述

我正在使用 Vue js，需要在 Axios 调用后创建一个新数组以传递给图表，我使用的是 Google Charts。

我从 axios 调用中得到了这个结果： 

[{ "id": "7", "item": "item 1", "month": "6", "sum": "3" },
{ "id": "8", "item": "item 2", "month": "6", "sum": "1" },
{ "id": "6", "item": "item 3", "month": "6", "sum": "3" },
{ "id": "5", "item": "item 4", "month": "6", "sum": "5" },
{ "id": "4", "item": "item 5", "month": "6", "sum": "19" }]

并且需要以这种格式创建一个数组，（EDIT:）在列出项目之后的第一行中固定了单词“Month”。在第二行中，我需要有月份名称（基于月份编号）和总和列值：

['Month', 'item 5', 'item 4', 'item 3'],
['June', 19, 5, 3],

我尝试在 axios 调用后使用 for ：

this.axios.post('Mycontroller/getCountByMonth',{
}).then((response) => {
        this.dataMonth = response.data.dataMonth;
        console.log('getList 2', this.dataMonth )
    for (i = 0; i < this.dataMonth; i++) { 
          console.log('getList 3')
          console.log(' >> ', this.dataMonth[i])
        }

我调试并看到它甚至没有进入 for 循环。

使用 typeof 我看到变量是一个对象。

如何从 axios 调用产生的对象将数组创建为预期的格式？

标签： javascriptarraysvuejs2

解决方案

让我们退后一步。您的请求的结果就是那个。

{ "id": "7", "item": "item 1", "month": "6", "sum": "3" }
{ "id": "8", "item": "item 2", "month": "6", "sum": "1" }
{ "id": "6", "item": "item 3", "month": "6", "sum": "3" }
{ "id": "5", "item": "item 4", "month": "6", "sum": "5" }
{ "id": "4", "item": "item 5", "month": "6", "sum": "19" }

这不是有效的 JSON。这是JSONL（JSON 行）

var myArrayData = [];
myJSONLResult.split('\n').map(function (row) {
    var resultRowAsArray = JSON.parse(row);
    myArray.push(resultRowAsArray);
});

现在您可以继续myArrayData使用一些循环或数组函数进行处理。

推荐阅读