Vuejs How to assign array object?

Question

I have a response like below from an API call,

{
    "1-2021": [
        {
            "id": 1,
            "status": "New",
            "player_count": 7
        },
        {
            "id": 2,
            "status": "Verified",
            "player_count": 4
        },
        {
            "id": 3,
            "status": "Regitered ID",
            "player_count": 18
        },
        {
            "id": 4,
            "status": "On Playing",
            "player_count": 15
        },
        {
            "id": 5,
            "status": "Finished",
            "player_count": 9
        },
        {
            "id": 6,
            "status": "Active",
            "player_count": 10
        },
        {
            "id": 7,
            "status": "Inactive",
            "player_count": 0
        }
    ],
    "2-2021": [
        {
            "id": 1,
            "status": "New",
            "player_count": 3
        },
        {
            "id": 2,
            "status": "Verified",
            "player_count": 8
        },
        {
            "id": 3,
            "status": "Regitered ID",
            "player_count": 17
        },
        {
            "id": 4,
            "status": "On Playing",
            "player_count": 11
        },
        {
            "id": 5,
            "status": "Finished",
            "player_count": 7
        },
        {
            "id": 6,
            "status": "Active",
            "player_count": 6
        },
        {
            "id": 7,
            "status": "Inactive",
            "player_count": 0
        }
    ]
}

Then, I have to repeat the whole arrays inside the arrays. How do I do that in VueJS?

I have searched for using forEach.. nowhere I found forEach usage.

Can anyone help me on how to fetch the values from that arrays by using either forEach or any else(VueJS)?

I expected the outcome:

chartData: [
        ['Month', 'New', 'Verified', 'Regitered ID', 'On Playing', 'Finished', 'Active', 'Inactive'],
        ['January', 7, 4, 18, 15, 9, 10, 0],
        ['February', 16, 22, 23, 30, 16, 9, 8]
      ]

Thanks & Regards,

Your problem has little to do with VueJS and a lot with processing data in JS. I would recommend looking into a tutorial touching upon the topic, e.g. eloquentjavascript.net/04_data.html — ccarstens
– ccarstens, Commented Oct 8, 2021 at 10:37
is the first row in chartData fixed ? I mean is it always the same fields ? — Kareem Dabbeet
– Kareem Dabbeet, Commented Oct 8, 2021 at 11:09

Jeremy Caney · Accepted Answer · 2021-11-22 05:14:36Z

3

Try this

let a = {
  "1-2021": [{
      "id": 1,
      "status": "New",
      "player_count": 7
    },
    {
      "id": 2,
      "status": "Verified",
      "player_count": 4
    },
    {
      "id": 3,
      "status": "Regitered ID",
      "player_count": 18
    },
    {
      "id": 4,
      "status": "On Playing",
      "player_count": 15
    },
    {
      "id": 5,
      "status": "Finished",
      "player_count": 9
    },
    {
      "id": 6,
      "status": "Active",
      "player_count": 10
    },
    {
      "id": 7,
      "status": "Inactive",
      "player_count": 0
    }
  ],
  "2-2021": [{
      "id": 1,
      "status": "New",
      "player_count": 3
    },
    {
      "id": 2,
      "status": "Verified",
      "player_count": 8
    },
    {
      "id": 3,
      "status": "Regitered ID",
      "player_count": 17
    },
    {
      "id": 4,
      "status": "On Playing",
      "player_count": 11
    },
    {
      "id": 5,
      "status": "Finished",
      "player_count": 7
    },
    {
      "id": 6,
      "status": "Active",
      "player_count": 6
    },
    {
      "id": 7,
      "status": "Inactive",
      "player_count": 0
    }
  ]
};

let ar = [];
let b = Object.keys(a).forEach((e, index) => {



  if (index == 0) {

    let b = a[e].map(r => r.status)

    b.unshift("Month")
    ar.push(b)
  }
  let a1 = [e]

  a[e].forEach(c => {



    a1.push(c.player_count)
    c.status

  })
  ar.push(a1)

})

console.log(ar)

edited Nov 22, 2021 at 5:14

Jeremy Caney

7,808115 gold badges57 silver badges86 bronze badges

answered Oct 8, 2021 at 11:09

Vivek Vs

907 bronze badges

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

3 Comments

Kareem Dabbeet Over a year ago

I've added a snippet to your answer so we can run the code and check it

dede.brahma Over a year ago

@VivekVs how to change value "1-2021" become "January" ?

Vivek Vs Over a year ago

let a="1-2021"; let d2=new Date(a.split('-')[1],a.split('-')[0]-1,1).toLocaleString('default', { month: 'long' }); console.log(d2)

Collectives™ on Stack Overflow

Vuejs How to assign array object?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related