从数组中扩展现有对象的数据

Posted

技术标签:

【中文标题】从数组中扩展现有对象的数据【英文标题】:Extending data of an existing object from an array 【发布时间】:2020-04-29 12:30:42 【问题描述】:

我从 API 接收 JSON 格式的数组。我想将它们合并到由对象graphData 组成的嵌套数组中。如何通过一项扩展数据对象?

mounted() 

   var i = 0;
   const axios = require('axios');
    //Usage
    axios.get("https://3.11.40.69:9001/app/usageUnitForCustomer/1521/2019-12-30/2020-12-30")
      .then(response => 
        const time = response.data.event_time; //["2019-12-30T14:06:21.000Z", "2019-12-30T14:06:21.000Z"]
        const unit = response.data.unit; //[44.67, 75.89]
        for (i = 0; i < 1; i++) 
          if (time[i] !== time[i + 1]) 
            this.graphData[1].data.time[i] = unit[i];
          
         
      )
    //Revenue
    axios.get("https://3.11.40.69:9001/app/revenueUnitForMachine/345/2019-12-30/2020-12-30")
      .then(response => 
        const time = response.data.event_time; //["2019-12-30T14:06:21.000Z", "2019-12-30T14:06:21.000Z"]
        const unit = response.data.revenue; //[44, 75]
        for (i = 0; i < 10; i++) 
          if (time[i] !== time[i + 1]) 
            this.graphData[0].data.time[i] = unit[i];
          
         

      )
  ,
  data() 
      return 
        graphData: [
          name: 'Revenue', data: ,
          name: 'Usage', data: 
        ]
      
    

执行上述代码后,两个数据对象仍然是空的。 结果如下所示,并出现以下错误消息:

0:
name: "Revenue"
data: Object []

1:
name: "Usage"
data: Object []

Uncaught (in promise) TypeError: Cannot set property '0' of undefined

预期结果:

graphData: [
          name: 'Revenue', data: '2019-12-30T14:06:21.000Z': 448, '2019-12-30T14:06:22.000Z': 44,
          name: 'Usage', data: '2019-12-30T14:06:21.000Z': 448, '2019-12-30T14:06:22.000Z': 44
        ]

有人知道吗?

【问题讨论】:

能否举例说明一下api返回的数据结构以及你要制作的新数据结构? @programmerRaj 我在帖子中编辑了它。 好的,我看到输出需要是什么样的,但是输入是什么形式的呢? @programmerRaj 在帖子中编辑。 【参考方案1】:

我看到的一个问题是您在this.graphData[1].data.time[i] = unit[i]; 中访问time[i],但它没有在您的对象中定义。

也许将其初始化为数组有帮助?

data() 
    return 
        graphData: [
          name: 'Revenue', data:  time: [] ,
          name: 'Usage', data:  time: [] 
        ]
    

编辑:好的,在您编辑预期结果后,我看到另一个问题。

你能试试这样设置值吗?

this.graphData[1].data[time[i]] = unit[i];

注意time[i] 周围的额外[]

【讨论】:

【参考方案2】:

您无法从 .then() 块中访问外部变量。您应该能够将整个外部块变成 async 并使用 await 进行 axios 调用。

试试这样的:

async mounted() 

   var i = 0;
   const axios = require('axios');
    //Usage

   const response = await axios.get("https://3.11.40.69:9001/app/usageUnitForCustomer/1521/2019-12-30/2020-12-30");

        const time = response.data.event_time;
        const unit = response.data.unit;
        for (i = 0; i < 1; i++) 
          if (time[i] !== time[i + 1]) 
            this.graphData[1].data.time[i] = unit[i];
          
         


...

... 继续使用 await 进行其余的 axios 呼叫。

【讨论】:

以上是关于从数组中扩展现有对象的数据的主要内容,如果未能解决你的问题,请参考以下文章

需要来自 txt 文件的数据,以逗号分隔,以使用现有类中的对象填充数组列表

根据组件调用的数量从现有数组构建新数组

RestKit:将单个对象映射到现有数组

如何从数据数组中删除对象(核心数据)

如何在不创建新数组的情况下用另一个数组扩展现有 JavaScript 数组

Vue.js 将对象添加到现有数组