CODEWITHSUNDEEP
typescriptangular6
PGH
PGH

Reputation: 2204

To display other JSON objects based on their ID

I have 2 JSON files called teachers and sessions as shown below:

teachers

[
  {
    "name": "Teacher 1",
    "sessionId": "02"
  },
  {
    "name": "Teacher 2",
    "sessionId": "03"
  },
  {
    "name": "Teacher 3",
    "sessionId": "01"
  }
]

sessions

    [
    {
        "id":"01",
        "name": "Session 01"
    },
    {
        "id":"02",
        "name": "Session 02"
    },
    {
        "id":"03",
        "name": "Session 03"
    },
    {
        "id":"004",
        "name": "Session 04"
    }
]

I want display the session for the particular teacher like this:

enter image description here

But i couldn't, Below is my component CODE:

HTML

<h4>Teachers</h4>
<div class="cust-detail" *ngFor="let teacher of teachers">
    <tr>
        <td>Name</td>
        <td>{{teacher.name }}</td>
    </tr>
    <tr>
        <td>Assigned Session: </td>
        <li *ngFor="let session of selectedSession">{{session?.name}}</li>
    </tr>   
    <hr>
</div>

TS

import { Component } from '@angular/core';
import { ContactService } from './contacts.service';
import{ ISessions,ITeachers} from '../models/app.models';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  teachers: ITeachers[];
  sessions: ISessions[];
  public selectedSession: ISessions[];

  constructor(private myService: ContactService) {}

  ngOnInit() {
    this.myService.getTeachers()
      .subscribe(res => this.teachers = res);
       this.myService.getSession()
      .subscribe(res => this.sessions = res);

    for (const teacher of this.teachers)  {
      if (teacher.sessionId) {
        this.getSessionById(teacher.sessionId);
     }
    }

  }


public getSessionById(sessionId: string){
 this.selectedSession = this.sessions ? this.sessions.filter((x: ISessions) => x.id === sessionId) : [];
 console.log(this.selectedSession);
}

}

DEMO

Upvotes: 1

Views: 70

Answers (2)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can handle result like this:

this.result = this.teachers.map(teacher => 
({...this.sessions.find(p => teacher.sessionId === p.id), teacher}));

Demo https://stackblitz.com/edit/angular-join-object

Updated:

I update query to group teacher and sessions they teach, may be 1 teacher teach many session.

 this.result = this.teachers.map(teacher => 
({session: this.sessions.filter(p => teacher.sessionId === p.id), teacher}));

Demo: https://stackblitz.com/edit/angular-join-object-2

Upvotes: 2

baao
baao

Reputation: 73251

You should never subscribe within a subscribe. Better use zip, forkJoin or similar. You can then reduce the data and get grouped how you want it

zip(this.myService.getTeachers(), this.myService.getSession())
  .pipe(
    flatMap(([t, s]) => {
      return of(t.reduce((a, b) => {
        a[b.sessionId] = (a[b.sessionId] || b);
        a[b.sessionId].sessions = s.filter(e => e.id === b.sessionId);
        return a;
      }, {}));
    })
  ).subscribe(e => this.teachers = e);

Upvotes: 1

Related Questions