multi dimensional array filter in vue js - vue.js

Question

i am trying to filter from multi dimensional array in vue js.
first i am storing response from axios in a variable like
fetchUsersDetails() {
var vm = this;
axios.get('school/api/user',{headers: getHeader()}).then(response => {
Vue.set(vm.$data, 'userList', response.data.data)
//console.log(this.userList)
})
},
on doing console.log(this.userList) iam getting
0:{
name:rajesh
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:1
session_id:1
}
}
}
1:{
name:rohan
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:1
session_id:1
}
}
}
2:{
name:rahul
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:2
session_id:1
}
}
}
3:{
name:ramesh
city:dhanbad
state:jharkhand
student_session{
0:{
class_id:3
session_id:1
}
}
}
and so on...
now in html
<table class="table">
<tr>
<th style="display: none">Id</th>
<th>Sl. No.</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="display: none">Id</th>
<th>Sl. No.</th>
<th>Name</th>
</tr>
</tfoot>
<tbody>
<tr v-for="(studentDetails, index) in filterUserLists">
<td style="display: none">{{studentDetails.user_token}}</td>
<td>{{index+1}}</td>
<td>
<a #click="showModal(studentDetails)" data-toggle="modal" data-target="#showModal" >{{studentDetails.first_name}}</a>
</td>
</tr>
</tbody>
and i am filtering my userList
filterUserLists: function () {
if(this.userList)
{
var list= this.userList
.filter(item => item.student_session.class_id==="1" )
}
console.log(list)
},
but i am getting empty list on my console though in my userList student_session is present with all values
i am new to vue js, so please help me
thankx in advance...

Answer 1

you can use computed
computed: {
filterUserLists () {
var filtered = [];
for (var i = 0; i < this.userList.length; i++) {
if (this.userList[i].student_session.class_id == "1") {
filtered.push(this.userList[i]);
}
}
return filtered;
}
}

Answer 2

This seems to be rather a problem with your filter because you try to access the secound array directly.
For me it worked with
userList.filter(item => item.student_session[0].class_id===1 )
and
userList
.filter(item => item.student_session
.filter((item2 =>item2.class_id===1 )) )
Or just use two loops like everyone does for a two dimensional array.
for(var i =0; i < userList.length; i++){
...
for(var j=0; j < userList[i].student_session.length; j++){
if(userList[i].student_session[j].class_id===1){
...
}
}
}
If you declared filterUserList unter methods you have to use it as function in the v-for
<tr v-for="(studentDetails, index) in filterUserLists()">
You try to access the properties .user_token and .first_name but these are never declared.