I receive arrays from an API in a JSON format. I want to merge them into the nested array called which consists of objects graphData
. How do I extend the data object by one entry?
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: {}}
]
}
}
After executing the above code both data objects are still empty. The outcome looks like this and following error message:
0:
name: "Revenue"
data: Object []
1:
name: "Usage"
data: Object []
Uncaught (in promise) TypeError: Cannot set property '0' of undefined
Expected outcome:
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}}
]
Has anyone an idea?
You cannot reach outside variables from within a .then() block. You should be able to make the whole outside block into an async
and use await
for your axios
calls.
Try something like this:
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];
}
}
...
... continue to use await
for the rest of your axios
calls.
One issue I see is that you access time[i]
in this.graphData[1].data.time[i] = unit[i];
but it is not defined inside your objects.
Maybe initializing it as an array helps?
data() {
return {
graphData: [
{name: 'Revenue', data: { time: [] }},
{name: 'Usage', data: { time: [] }}
]
}
}
Edit: Ok, after you edited the expected outcome I see another issue.
Can you try setting the value like this?
this.graphData[1].data[time[i]] = unit[i];
Note the extra []
around time[i]
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.