Looping through nested arrays using VUEJS - vuejs2

Question

/I have the following JSON data. I need to list students doing a particular subject. How can this be done using v-for in VUEJS?/
students_subjects:
[
{
student_id:1,
student_name:"Moses",
reg_no:"ABC/2019",
subjects:[
{
subject_id:1
subject_name:"English"
},
{
subject_id:2
subject_name:"Maths"
}
]
},
{
student_id:2,
student_name:"James",
reg_no:"ABD/2019",
subjects:[
{
subject_id:1
subject_name:"English"
},
{
subject_id:2
subject_name:"Maths"
}
]
}
]
// My structure of html code is as shown below
<div id="app">
<ul>
<li v-for="item in students">
<div class="row " style="background-color: #f4fbee;">
<div class="col-md-2">{{item.reg_no}}</div>
</div>
<div class="row" v-for="subjects in item.subjects">{{subjects.subject_name}}
</div>
</li>
</ul>
<pre>{{students}}</pre>
<p>{{getStudentsBySubjectId}}</p>
</div>
var appVM=new Vue({
el:"#app",
data:function(){
return {
student_id: '',
reg_no:'',
student_name:'',
students:Array(),
subjects:{},
}
},
created:function (){
this.getAllStudents();
},
methods:{
getAllStudents:function(){
var self=this;
axios.get("/Students/list").then(function (response) {
this.students = response.data;
}.bind(this)).catch(function (error) {
console.log('Error while fetching student data: ' + error)
})
},
getStudentsBySubjectId:function (students, subjectId) {
return students.filter(function(student) {
return student.subjects.some(function(subject) {
return subject.subject_id === subjectId;
})
})
}
},
})
</script>
// How do we get to display the filtered students.
//The code above shows the data returned on on calling the array on the view

Answer 1

Assuming that you are using ES6.
Here's how you would find all the students taking a particular subject:
function getStudentsBySubjectId(students, subjectId) {
return students.filter(student => student.subjects.some(subject => subject.subject_id === subjectId))
}
For ES5, use normal functions instead of arrow functions:
function getStudentsBySubjectId(students, subjectId) {
return students.filter(function(student) {
return student.subjects.some(function(subject) {
return subject.subject_id === subjectId;
})
})
}
you can simply v-for over the array returned by the above function.