multi dimensional array filter in 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...

Looks like your student_session is an array. Try item.student_session[0].class_id. — Egor Stambakio
– Egor Stambakio, Commented Jun 29, 2017 at 8:28
ye student_session is an array on using item.student_session[0].class_id==1 i am getting [Vue warn]: Error in render function: "TypeError: Cannot read property 'class_id' of undefined" — rajesh
– rajesh, Commented Jun 29, 2017 at 8:47
This is because your data hasn't arrived at the moment of the DOM mount. In your template use v-if and check if your data exists before trying to access it. — Egor Stambakio
– Egor Stambakio, Commented Jun 29, 2017 at 11:58
@wostex but i am populating all the users with class_id 1 in var list and then i am displaying it.. but i am not able to get into 2nd array (student_session) using item.student_session[0].class_id or item[0].student_session[0].class_id — rajesh
– rajesh, Commented Jun 29, 2017 at 12:14

hossein vatankhah · Accepted Answer · 2019-07-15 11:11:17Z

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;
    }
}

answered Jul 15, 2019 at 11:11

hossein vatankhah

2142 silver badges9 bronze badges

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

Comments

reinerBa · Accepted Answer · 2017-06-30 08:01:59Z

0

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.

edited Jun 30, 2017 at 8:01

answered Jun 29, 2017 at 8:30

reinerBa

1,6601 gold badge17 silver badges22 bronze badges

2 Comments

rajesh Over a year ago

on using userList.filter(item => item.student_session[0].class_id===1 ) i am getting the following error [Vue warn]: Error in render function: "TypeError: Cannot read property 'class_id' of undefined" @Reiner on using var list= this.userList .filter(item => item.student_session .filter((item2 =>item2.class_id===1)) ) iam getting all user list, but class_id of only one user is 1 – rajesh 53 mins ago filterUserList under computed

rajesh Over a year ago

@ Reiner in userList i am getting array like 0:{ name:rajesh city:dhanbad state:jharkhand student_session{ 0:{ class_id:1 session_id:1 } } } 1:{ name:rajesh city:dhanbad state:jharkhand student_session{ 0:{ class_id:2 session_id:1 } } } 2:{ name:rajesh city:dhanbad state:jharkhand student_session{ 0:{ class_id:3 session_id:1 } } }

Collectives™ on Stack Overflow

multi dimensional array filter in vue js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related