How to make multi-dementional arrays with array lists wiht axios and vue js-CodePudding

I am quite new to the axios and javascript and I am so confused with making multi-dimentional array.

1. I want my data to look like :

userList: [
                    {
                        user_no: 1,
                        user_nickname: "hailey",
                    },
                    {
                        user_no: 2,
                        user_nickname: "mandi",
                    },
                    {
                        user_no: 3,
                        user_nickname: "loren",
                    },
                    {
                        user_no: 4,
                        user_nickname: "james",
                    },
],

2. But from axios response, I am getting result like this :

{user_no : 1, user_nickname : "hailey"}
{user_no : 2 , user_nickname : "mandi"}
{user_no : 3 , user_nickname : "loren"}
{user_no : 4 , user_nickname : "james"}

How can I wrap those individual lists into multi dimentional array so I can make #2 -> #1 ? I saw some functions like flat which does the opposite of what I want. So I was wondering if there's any way like those to wrap all arrays with outer array.

CodePudding user response：

I did not see any issues with the axios response you are getting. As v-data-table need an array to iterate and you are getting the same from the API response.

Working Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dataList: [{
            "user_no": 1,
            "user_nickname": "hailey"
    },
    {
      "user_no": 2,
      "user_nickname": "mandi"
    },
    {
      "user_no": 3,
      "user_nickname": "loren"
    },
    {
      "user_no": 4,
      "user_nickname": "james"
    }]
  }),
  computed: {
    gridHeaders() {
      return [
        { text: "User Number", value: "user_no" },
        { text: "User Nickname", value: "user_nickname" }
      ];
    },
  },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
    <v-data-table :headers="gridHeaders" :items="dataList" item-key="user_no">
    </v-data-table>
</div>