To access object properties based on the id present in an array - arrays

Question

I have 2 api's called teachers and sessions.
teachers JSON file:
[
{
"teacherName": "Binky Alderwick",
"id": "01"
},
{
"teacherName": "Basilio Gregg",
"id": "02"
},
{
"teacherName": "Binky Alderwick",
"id": "03"
},
{
"teacherName": "Cole Moxom",
"id": "04"
}
]
sessions JSON file:
[
{
"id":"001",
"sessionName": "Chemistry",
"notes": "Chemistry is the study of matter, its properties",
"teacherIds": ["01","03"]<==========
},
{
"id":"002",
"sessionName": "Physics",
"notes": "Physics is the natural science that studies matter and its motion ",
"teacherIds": ["02","04"]
},
{
"id":"003",
"sessionName": "Maths",
"notes": "Mathematics includes the study of such topics as quantity",
"teacherIds": ["01","04"]<=========
},
{
"id":"004",
"sessionName": "Biology",
"notes": "Biology is the natural science that studies life and living organisms",
"teacherIds": ["02","04"]
}
]
Now i am displaying all the teachers in the template like this:
In the sessions JSON, I have mentioned the teacherIDs which is of array, I want to display the sessions of the particular teacher based upon the teachersID.
For ex the sessions (Chemistry & Maths) contains teacherID as (01),So i want to display these 2 sessions(Chemistry & Maths) under Teacher 1(i,e Binky Alderwick) Like this:
I should get all the properties of the session object based on the teacherId.
Stackblitz DEMO

Answer 1

This works in your stackblitz
<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
<tr>
<td>Name</td>
<td>{{ teacher.teacherName }}</td>
</tr>
<tr>
<td>Sessions</td>
<div *ngFor="let session of sessions">
<span *ngFor="let id of session.teacherId">
<span *ngIf="id == teacher.id">
<h2>{{ session.sessionName }}, {{ session.id }}</h2>
<p>{{session.notes}}</p>
</span>
</span>
</div>
</tr>
<hr>
</div>
Dont forget to remove the arrows from your JSON before putting this in.

Answer 2

You need to manipulate your JSON for the same like below -
getManipulatedData() {
this.teachers && this.teachers.forEach(res => {
res['subjects'] = [];
this.sessions.forEach(obj => {
if (obj['teacherId'].includes(res.id)){
res['subjects'].push({subject: obj.sessionName, notes: obj.notes})
}
});
});
}
<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
<tr>
<td>Name</td>
<td>{{teacher.teacherName }}</td>
</tr>
<tr>
<td>Sessions</td>
<td><br>
<div *ngFor='let subject of teacher?.subjects'>
<h2>{{subject?.subject}}</h2>
<p>{{subject?.notes}}</p>
</div>
</td>
</tr>
<hr>
</div>
Working Example
Update -
Also you need to call this method on API call end like this -
ngOnInit() {
this.myService.getContacts()
.subscribe(res => {
this.teachers = res;
this.getManipulatedData();
});
this.myService.getWorkers()
.subscribe(res => {
this.sessions = res;
this.getManipulatedData();
});
}