Noob Coder Noob Coder - 27 days ago 9
Javascript Question

Vuejs array push

Im receiving array of objects from backend in below format. I am trying to get these datas and push it into a JavaScript array so that I can use them later on based on my needs.

[
{
id: 1,
name: "Dr. Darrin Frami III",
email: "gaylord67@example.com",
address: "42568 Cameron Cove Fritschborough, MA 86432-0749",

},
]


here is my vuejs code:

<script>
export default {
data(){
return {
fakeUsers: [],
fakeUser: {id: '', name: '', email: ''},
}
},
methods:{

},
mounted() {
var route = '/get-users';
this.$http.get(route).then((response)=>{
for (var i = 0; i < response.data.length; i++) {
this.fakeUser.id = response.data[i].id;
this.fakeUser.name = response.data[i].name;
this.fakeUser.email = response.data[i].email;
this.fakeUsers.push(this.fakeUser);
}

});
console.log(this.fakeUsers);
console.log(this.fakeUsers[0]);
}
}
</script>


the vue-dev tool result:

enter image description here

Output of the line
console.log(this.fakeUsers);
is
[__ob__: Observer]
. Shouldnt it print something like
[Array[10]]
??

Output of the line
console.log(this.fakeUsers[0]);
is
undefinded
I cant figure out why.. ? please help

Answer

$htptp() creates an async ajax call, so the code in then() is executed after the console command after it.

Simple solution: put the console commands into the function in .then() as well.