Vuex state array keys

Question

I initialize the state

state = {
   matches: []
}

mutations = {
   setMatches(state,payload) {
     state.matches = payload
   }
}

in my getters I setup to get keys

userMatchesId:  state => {
   return [...state.matches.keys()]
}

i get the error

state.matches.keys is not a function

My data looks like this

{
  "44033":{
    "comments":[
        {
          "comment":"selected Hasan Ali was Bowler and Took a wicket",
          "playerId":9598
        },
        {
          "comment":"selected Fakhar Zaman was Fielder and Caught a catch",
          "playerId":8192
        },
        {
          "comment":"selected Adil Rashid was Bowler and Took a wicket",
          "playerId":3899
        },
        {
          "comment":"selected Ben Stokes was Fielder and Caught a catch",
          "playerId":4489
        },
        {
          "comment":"selected Ben Stokes was Fielder and Caught a catch",
          "playerId":4489
        },
        {
          "comment":"selected \"Ben Stokes\" was and Captain and awarded 2x points",
          "playerId":4489,
          "wasCaptain":true
        }
    ],
    "score":150
  },
  "44034":{
    "comments":[
        {
          "comment":"selected Babar Azam was Fielder and Caught a catch",
          "playerId":5601
        },
        {
          "comment":"selected \"Ben Stokes\" was and Captain and awarded 2x points",
          "playerId":4489,
          "wasCaptain":true
        }
    ],
    "score":10
  }
}

I need to create 2 arrays one containing keys of this array and another array with score.

I have tried mapping return using computed properties in vue component but I guess I am missing something.

I have also tried

  let score;
  state.matches = [...Array.from(payload.matches).keys()];

  Array.from(payload.matches).forEach(match => {
    match.score += score
  });

  state.score = score;

the result i want is

matches: ["44033","44044"]
score: ["150",10]

Answer 1

In order to do what you want, you'll have to use 2 functions :

1. Object.keys() that will return you an array of the keys of your object (doc)
2. Array​.prototype​.map() that will return you an array of the results of the function you provide (doc)

const data = {
  "44033": {
    "score": 150
  },
  "44034": {
    "score": 10
  }
}

const ids = Object.keys(data) // ["44033", "44034"]
console.log(ids)

// for each id in ids, return the data[id].score
const scores = ids.map(id => data[id].score) // [150, 10]
console.log(scores)