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

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

Benjamin Charais · Accepted Answer · 2019-02-22 05:21:17Z

2

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.

answered Feb 22, 2019 at 5:21

Benjamin Charais

1,3688 silver badges17 bronze badges

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

Comments

Pardeep Jain · Accepted Answer · 2019-02-22 04:48:11Z

1

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

edited Feb 22, 2019 at 4:48

answered Feb 22, 2019 at 4:40

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

2 Comments

PGH Over a year ago

in your working example you are taking all the contacts using get contacts. But i want to get session for one particular teacher id = "01" i don't want to take all the contacts.

Pardeep Jain Over a year ago

I showed the way you can do, you can customise accordingly

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Working Example

Update -

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Update -

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related