In order to retrieve specific object attributes using the unique identifier

Question

In order to retrieve specific object attributes using the unique identifier

I am currently managing 2 API's referred to as teachers and sessions.

The contents of the teachers JSON file are:

   [
      {
        "teacherName": "Binky Alderwick",
        "id": "01"
      },
      {
        "teacherName": "Basilio Gregg",
        "id": "02"
      },
      {
        "teacherName": "Binky Alderwick",
        "id": "03"
      },
      {
        "teacherName": "Cole Moxom",
        "id": "04"
      }
    ]

The sessions JSON file looks like this:

[
    {
        "id":"001",
        "sessionName": "Chemistry",
        "notes": "Chemistry is the study of matter, its properties",
        "teacherId": "01"<==========
    },
    {
        "id":"002",
        "sessionName": "Physics",
        "notes": "Physics is the natural science that studies matter and its motion ",
        "teacherId": "03"
    },
    {
        "id":"003",
        "sessionName": "Maths",
        "notes": "Mathematics includes the study of such topics as quantity",
        "teacherId": "01"<=========

    },
    {
        "id":"004",
        "sessionName": "Biology",
       "notes": "Biology is the natural science that studies life and living organisms",
        "teacherId": "04"
    }
]

My goal is to showcase all the teachers in the template as shown in this:

https://i.sstatic.net/oH02B.png

Within the sessions JSON, the teacherID is mentioned. I aim to display the sessions specifically associated with the particular teacher based on their teachersID.

For example, since the sessions (Chemistry & Maths) have a teacherID of (01), I intend to display these 2 sessions (Chemistry & Maths) under Teacher 1 (Binky Alderwick) like so:

https://i.sstatic.net/1kzZx.png

I need to retrieve all the properties of the session object based on the teacherId.

Check out the Stackblitz DEMO here

angular typescript angular6

Answer 1

Answer №1

To streamline the process, you can develop a single function that generates an array of sessions specifically for a chosen teacher.

For instance, in the app.component.ts file:

retrieveSessionsForTeacher(teacherId) {
    return this.sessions ? this.sessions.filter(x => x.teacherId === teacherId) : [];
}

HTML implementation:

<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 item of retrieveSessionsForTeacher(teacher.id)">
      <h2>{{item.sessionName}}</h2>
      <p>{{item.notes}}</p>
      </div>
    </td>
    </tr>   
    <hr>
</div>

Here is a comprehensive demonstration using StackBlitz to address your query.

Answer 2

To streamline the process, you can develop a single function that generates an array of sessions specifically for a chosen teacher.

For instance, in the app.component.ts file:

retrieveSessionsForTeacher(teacherId) {
    return this.sessions ? this.sessions.filter(x => x.teacherId === teacherId) : [];
}

HTML implementation:

<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 item of retrieveSessionsForTeacher(teacher.id)">
      <h2>{{item.sessionName}}</h2>
      <p>{{item.notes}}</p>
      </div>
    </td>
    </tr>   
    <hr>
</div>

Here is a comprehensive demonstration using StackBlitz to address your query.

In order to retrieve specific object attributes using the unique identifier

Answer №1

Similar questions

What steps should I take to fix this Angular 8 error?

Best practice in Angular 4: utilize services to load and store global data efficiently

Angular 2.0.0 - Simulated File Loader

Creating subclass mappings and defining subclasses dynamically using Typescript at runtime

Combining Django REST with Angular

Turning XSD into TypeScript code

Angular array of considerable size

Enhance the appearance of a custom checkbox component in Angular

Adding a blank line in an Angular table using primeNG to display database information requires a specific method

What is the technique for highlighting the exact data point on the XY am4chart when it is clicked?

The error message displayed by Create React App states: "You cannot utilize JSX without the '--jsx' flag."

What could be causing Angular to replace the original variable?

How can I create a universal "Add" button in Angular that can be used across all child components?

Angular resolver does not return anything if the outcome is an observable generated using the .asObservable() method

Assigning a Value to DropDown Menu in ngFor Angular 5

Should the PHP interface be exported to a Typescript interface, or should it be vice versa?

Tips for integrating yarn add/npm install with monorepositories

Updating a null value within the database was done successfully

Struggling to send information to the data layer on every page in Angular 9

Functional interceptor causing Router.navigate() to malfunction