I have jquery code from which I'm fetching the data report based on weekdays.
What I want is to read an array object returned by ajax.
Here is the script :
<script>
export default {
data() {
return {
currentcohortgraphdata: [{"Monday":"0","Tuesday":"0","Wednesday":"0","Thursday":"0","Friday":"0","Saturday":"0","Sunday":"0"}],
}
},
mounted() {
},
methods: {
loadCohortAttendancies() {
this.$Progress.start();
axios.get("api/loadCohortAttendancies").then(({data}) => (this.currentcohortgraphdata = data));
this.$Progress.finish();
var result = this.currentcohortgraphdata;
result.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
}
},
created() {
this.loadCohortAttendancies();
},
mounted() {
}
}
When I run above script from ajax request axios.get("api/loadCohortAttendancies").then(({data}) => (this.currentcohortgraphdata = data));
The results returned from the request is [{"Monday":"12","Tuesday":"10","Wednesday":"3","Thursday":"5","Friday":"4","Saturday":"1","Sunday":"9"}]
. But unfortunately when I run the script I dont get result from the alert(e.Thursday);
part of the script, can anyone point where I'm getting wrong? Thanks in advance
What is happening is that you are running your code before your request is done, and it results in running your forEach with default values
currentcohortgraphdata: [{"Monday":"0","Tuesday":"0","Wednesday":"0","Thursday":"0","Friday":"0","Saturday":"0","Sunday":"0"}],
Simply move ur code inside .then block
axios.get("api/loadCohortAttendancies").then(({data}) => {
this.currentcohortgraphdata = data
this.$Progress.finish();
var result = this.currentcohortgraphdata;
result.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
});
Alternatively, you can use async/await syntax:
methods: {
async loadCohortAttendancies() {
this.$Progress.start();
const { data } = await axios.get("api/loadCohortAttendancies");
this.currentcohortgraphdata = data;
this.$Progress.finish();
const result = this.currentcohortgraphdata;
result.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
}
},
Since JavaScript is asynchronous, your result.forEach
is running before your axios request is done. You can fix this by simply moving that block of code that relies on currentcohortgraphdata
being set, into another .then()
block following the one that sets the data. Like so:
loadCohortAttendancies() {
this.$Progress.start()
axios.get("api/loadCohortAttendancies")
.then({data} => this.currentcohortgraphdata = data)
.then(() => {
this.$Progress.finish();
var result = this.currentcohortgraphdata
result.forEach(e => {
if (e.Monday > 0) {
alert(e.Thursday)
}
})
})
}
When you execute forEach, the axios.get
request method has not been executed yet.
So, change your code and try it like this
loadCohortAttendancies() {
this.$Progress.start();
axios.get("api/loadCohortAttendancies").then(({data}) => {
this.currentcohortgraphdata = data;
this.currentcohortgraphdata.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
this.$Progress.finish();
});
}