Can't loop through array in vue single file component

Question

I have a vue.js app made with single file components. I have an empty array declared in my data:

data: function () {
  return {
    teamKeys: []
  }
},

Then I push values into it in one of my methods:

fetchTeams (token) {
  var this_ = this
  var url = 'myapiserver.com/teams'
  this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
    .then(function (response) {
      var teams = response.data.teams[0].teams
      teams.forEach(function (t) {
        this_.teamKeys.push(String(t.team_key))
      })
    })
    .catch(function (error) {
      console.log(error)
    })
},

(updated with actual fetchTeams method) Then, in another method, I try to loop through it using forEach.

fetchRosters (token) {
  var teamKeys = this.teamKeys
  teamKeys.forEach(function (key) {
    console.log(key)
    // do stuff
  })
}

The methods are called one after the other in mounted:

mounted () {
    this.$nextTick(() => {
      var accessToken = this.$route.query.accessToken
      this.fetchTeams(accessToken)
      this.fetchRosters(accessToken)
    })
  }

The forEach loop doesn't work for some reason, it seems like the array is being treated as empty because the inside of the forEach never gets accessed. Also, if I do this just before calling forEach:

console.log(this.teamKeys)
console.log(JSON.stringify(this.teamKeys))

the second output is blank [], and the first one is output in console like so:

Array(2)
0: "371.l.215756.t.1"
1: "371.l.621475.t.2"
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array

I'm sure I'm doing something stupid. Am I not creating the array properly? Do I even know what an array is?

I don't know, I was trying to diagnose the problem. I guess you can't do that? — greenerr
– greenerr, Commented Dec 16, 2017 at 13:38
hmm, its 0 for some reason. Which makes no sense, because if I do console.log(this.teamKeys) just before, it shows up with length: 2 in the console. — greenerr
– greenerr, Commented Dec 16, 2017 at 13:49
your running an asyn task thats why it doesnt get the teamKeys when required — zabusa
– zabusa, Commented Dec 16, 2017 at 14:05

zabusa · Accepted Answer · 2017-12-16 14:08:43Z

1

fetchTeams (token) {
  var this_ = this
  var url = 'myapiserver.com/teams'
  this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
    .then(function (response) {
      var teams = response.data.teams[0].teams
      teams.forEach(function (t) {
        this_.teamKeys.push(String(t.team_key))
      })
      //this will run it
      this_.fetchRosters(token)
    })
    .catch(function (error) {
      console.log(error)
    })
},

answered Dec 16, 2017 at 14:08

zabusa

2,72926 silver badges26 bronze badges

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

Comments

manudicri · Accepted Answer · 2017-12-16 13:35:52Z

1

I think you missed ')' at the end of the 3rd snippet

answered Dec 16, 2017 at 13:35

manudicri

1731 silver badge15 bronze badges

1 Comment

greenerr Over a year ago

You're right, thanks (fixed), but it's correct in my actual code

score 0 · Accepted Answer · 2017-12-16 14:29:20Z

0

fetchTeams (token) {
  var this_ = this
  var url = 'myapiserver.com/teams'
  return this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
}

mounted () {
  this.$nextTick(() => {
    var accessToken = this.$route.query.accessToken
    this
      .fetchTeams(accessToken)
      .then(function (response) {
        var teams = response.data.teams[0].teams
        teams.forEach(function (t) {
          this_.teamKeys.push(String(t.team_key))
        })
        this.fetchRosters(accessToken)    
      })
      .catch(function (error) {
        console.log(error)
      })
  })
}

Or:

fetchTeams (url, token) {
  return this.axios.get(url, {
    params: {
      accessToken: token
    }
  })
}

mounted () {
  this.$nextTick(async _ => {
    var accessToken = this.$route.query.accessToken
    var response = await this.fetchTeams('myapiserver.com/teams', accessToken)
    var teams = response.data.teams[0].teams
    teams.forEach(t => {
      this.teamKeys.push(String(t.team_key))
    })
    this.fetchRosters(accessToken)
  })
}

edited Dec 16, 2017 at 14:29

answered Dec 16, 2017 at 13:53

user6748331

3 Comments

greenerr Over a year ago

Yea, that looks like a mistake, but the t.team_key actually comes from an axios call. I left that part of the code out in order to simplify here. It's probably not clear in my question.

greenerr Over a year ago

updated. I didn't think that part of the code was relevant, as it seems the array is getting data, so I assume the push is working. I can see the data in there in my vue developer tools.

greenerr Over a year ago

yea, those both make sense. I've got something working as per zabusa's answer, but might try these as well.

Collectives™ on Stack Overflow

Can't loop through array in vue single file component

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related