We Keep Coding

How 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.

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>

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

use fetched info in an array in vue.js

I have this array:
data() {
return {
landingInfo: null,
slides: [
{
title: `this`,
},
{
title: "that",
},
{
title: "those",
},
],
};
},
Which is being displayed this way:
<div
class="slide"
v-for="(slide, index) in slides"
:key="index",
}"
>
<div>
<h1 class="text-bold">{{ slide.title }}</h1>
</div>
The problem is that I'm fetching info from and api and once I try to do:
slides: [
{
title: {{ landingInfo.data.subtitle }},
},
{
title: {{ landingInfo.data.subtitle2 }},
},
{
title: {{ landingInfo.data.subtitle3 }},
},
],
Everything explodes, I am new in vue using Nuxt.js and I cannot find any solution in how to achieve that.
Can someone show me how to include the fetched info inside the array property?
PD: I already tried using "{{thefetchedinfo}}" but it takes it literally that way and displays "{{thefetchedinfo}}"

The OP doesn't provide much info on the fetch, like when it is performed or what the returned data looks like, but the common pattern goes like this...
// <template> as in the OP, then...
data() {
return {
landingInfo: null,
slides: [], // empty before the fetch
};
},
mounted () {
fetchFromTheAPI().then(landingInfo => {
// More commonly, you'd map over the returned data to form slides,
// or, trying to match the OP...
this.slides = [
{ title: landingInfo.data.subtitle },
{ title: landingInfo.data.subtitle2 }, // ... and so on
]
});
},

How to $set a property to multiple objects in an array but have retain individual reactivity in vue js

In my case, I have data array with multiple objects
data() {
return {
selected: 0,
presetData: [true, true, true],
data: [
{
name: "name 1"
},
{
name: "name 2"
}
]
};
},
then I want to push inside each object in data like below
setNewData() {
this.data.forEach((o, i) => {
this.$set(this.data[i], "time", this.presetData);
});
},
now my with presetData pushed into data will look like this
data: [
{
name: "name 1",
time: [true, true, true]
},
{
name: "name 2",
time: [true, true, true]
}
]
and I want to change individual time property of each object, which I use something like below
$set(item.time,selected,true)
My Issue
my issue is, this going to change both objects time property. How do I first push/set correctly presetData to data, below is my entire code , I'm sorry I'm very new to programming, here is the link to jsfiddle
new Vue({
el: "#app",
data() {
return {
selected: 0,
presetData: [true, true, true],
data: [
{
name: "name 1",
},
{
name: "name 2",
}
]
};
},
methods: {
setNewData() {
this.data.forEach((o, i) => {
this.$set(this.data[i], "time", this.presetData);
});
},
}
})
<div id="app">
<button #click="setNewData">Set Data</button>
<br>
<br>
<select v-model="selected">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<div v-for="item in data" :key="item.id">
<p>{{item.name}}</p>
<p>{{item.time}}</p>
<button #click="$set(item.time,selected,true)">Change True</button>
<button #click="$set(item.time,selected,false)">Change False</button>
</div>

This is an object reference issue. Each of your time properties references the same array (presetData). You can break out of this problem by making shallow copies via spread syntax.
You can also avoid Vue.set() when assigning new data using the same technique
setNewData() {
this.data = this.data.map(d => ({
...d, // create a shallow copy of each data item
time: [...this.presetData] // add "time" as a shallow copy of presetData
}))
},
To change individual array elements within the time property, you need to continue using Vue.set(), ie
this.$set(item.time, selected, true)

How to update nested array (multi react-select)

I'm creating an app where I need to store selected values in array nested in object (category below). State looks like:
state = {
data: {
user: "",
title: "",
text: "",
category: [], // should store values
},
updateNoteId: null,
}
In my render() I have following form:
<form onSubmit={this.submitNote}>
<Select
name="category"
value={this.state.data.category}
options={options}
onChange={this.handleMultiChange}
multi
/>
<input type="submit" value="Save" />
</form>
Options are:
const options = [
{ value: 1, label: 'one' },
{ value: 2, label: 'two' },
{ value: 3, label: 'three' }
]
So the question is how this.handleMultiChange function should looks like to work. Category[] need to keep all values selected in Select which is react-select component (eg. it should be category = [1,3], when 'one' and 'three' were chosen). I tried many combination but none of them worked so far. I prefer to use ES6 without any external libraries/helpers to do that.

handleMultiChange(selectedOptions) {
this.setState({
data: {
...this.state.data,
categories: selectedOptions
}
})
}

Filtering on a Multi-Dimensional Array in Angular 2 App

I am trying to find a way to handle filtering an array with an array in my Angular 2 app. The data looks like this:
let services = [
{
flags: [
{
action: "Flag One",
completed: true,
},
{
action: "Flag Two",
completed: false,
},
],
ribbons: [
{
action: 'Ribbon One',
active: false,
},
{
action: 'Ribbon Two',
active: true,
},
]
}
]
Now, if I know what item within the second array to target, I can do this:
let filteredServices = services.filter(service => service.flags[0].completed === false);
console.dir(filteredServices);
However, generally I don't know which item within the inner array to target, so how can I write a filter function to iterate over both arrays and filter for the specific item I'm looking for? Would I use a combination of "filter" and "forEach"? Or is there a more succinct way to do this?

You can use filter with some
let filteredServices = services.filter((element) => element.flags.some((subElement) => subElement.completed === false));