I am currently working on a project with VueJS where I am utilizing Axios to fetch data and store it in an array.
Below is my data object structure:
data() {
return {
uid: [], // Each element contains a JSON containing the node and an array containing UID and operator name
timer: null,
tasks: [],
nodes: [
'assembler',
'device'
]
}
In the created section, I am calling functions to fetch data using axios:
created: function() {
// Get current uids and tasks, if there are any
this.fetchUID()
this.fetchTasks()
}
Here are my methods:
methods: {
fetchUID() {
var obj = {}
this.nodes.forEach(node =>
axios.get('http://localhost:8080/' + node)
.then(res => res.data.length > 0 ? obj[node] = [res.data[0].id, res.data[0].operator.name] : console.log("No data found for " + node + ". It seems there is no instance of " + node))
.catch(err => console.log(err))
)
this.uid.push(obj)
},
fetchTasks() {
// Console log used for testing purposes
console.log(this.uid[0].assembler)
}
}
The issue arises when I try to access this.uid[0].assembler, as it returns undefined even though it should contain a value. How can I resolve this?