Vuejs array push

Question

I'm receiving array of objects from backend in below format. I am trying to get this data 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: "[email protected]",
    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:

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

Output of the line console.log(this.fakeUsers[0]); is undefined, and I can't figure out why.

JackPoint · Accepted Answer · 2016-11-11 16:08:24Z

5

$http() 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.

edited Nov 11, 2016 at 16:08

JackPoint

4,1031 gold badge33 silver badges42 bronze badges

answered Nov 10, 2016 at 13:57

Linus Borg

24k7 gold badges65 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Noob Coder Over a year ago

excellent answer mate.. but i need to know one more thing.. as im new with vuejs.. and have not finished reading all documentations yet. just watched some tutorials. but i have one query, how can i get the first element after the ajax call is complete when the page loads? @linus

Collectives™ on Stack Overflow

Vuejs array push

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related