0
168
ViewsHow to make multi-dementional arrays with array lists wiht axios and vue js
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.
·
Juan Pablo Isaza
2 answers
Answer question0
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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.0/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>
·
Juan Pablo Isaza
Report
0
I was being stupid. As the answer above said, there is nothing wrong with my data or code. But when I was getting data, the objects are actually insde the data so the structure was like this :
response.data.data //i was calling it response.data ^^:;
Thank you for help :D
·
Juan Pablo Isaza
Report
Answer question