Set title with all related item inside,

Question

I want to display a list of student that has many subjects and each subject has many bills along with it. I want to set title inside each subject name that display all bills related to it. Right now I'm having a trouble of separating subject by bills like for each bill they will call subject again.

<h3>List of Student</h3>
<div *ngFor="let key of students | async; index as studentId">
  <h2>
    <a>
      {{key.studentId}}
    </a>.
    {{key.studentName}}
  </h2>
  <div *ngFor="let elements of key.subjectSS">
    <div *ngFor="let billDetail of elements.billSS">
      <b>Subject:</b><span [title]="'Học phí: ' + billDetail.price"> {{elements.subject.subjectName}}</span><br />
      <span>
        <b>Bill:</b> {{billDetail.price}} VNĐ<br />
      </span>
    </div>
  </div>
</div>

My Screen Display My Json

[
  {
    "subjectSS": [
      {
        "subject": {
          "studentSS": [],
          "subjectId": 1,
          "subjectName": "Math"
        },
        "billSS": [
          {
            "billId": 1,
            "price": 500,
            "reqStuSubId": 1
          },
          {
            "billId": 2,
            "price": 700,
            "reqStuSubId": 1
          },
          {
            "billId": 7,
            "price": 2400,
            "reqStuSubId": 1
          }
        ],
        "reqStuSubId": 1,
        "studentId": 1,
        "subjectId": 1
      },
      {
        "subject": {
          "studentSS": [],
          "subjectId": 2,
          "subjectName": "Geography"
        },
        "billSS": [
          {
            "billId": 6,
            "price": 1000,
            "reqStuSubId": 2
          },
          {
            "billId": 9,
            "price": 424,
            "reqStuSubId": 2
          }
        ],
        "reqStuSubId": 2,
        "studentId": 1,
        "subjectId": 2
      }
    ],
    "studentId": 1,
    "studentName": "Hung"
  },
  {
    "subjectSS": [
      {
        "subject": {
          "studentSS": [],
          "subjectId": 3,
          "subjectName": "Physical"
        },
        "billSS": [
          {
            "billId": 5,
            "price": 900,
            "reqStuSubId": 7
          },
          {
            "billId": 8,
            "price": 745,
            "reqStuSubId": 7
          }
        ],
        "reqStuSubId": 7,
        "studentId": 2,
        "subjectId": 3
      }
    ],
    "studentId": 2,
    "studentName": "Manh"
  },
  {
    "subjectSS": [],
    "studentId": 3,
    "studentName": "Long"
  }
]

Answer 1

You have to alter your json in ts file because you don't want to use two loops in html for same content.

So here is my suggestion :

Your Component file

  import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  data: any = [
    {
      "subjectSS": [
        {
          "subject": {
            "studentSS": [],
            "subjectId": 1,
            "subjectName": "Math"
          },
          "billSS": [
            {
              "billId": 1,
              "price": 500,
              "reqStuSubId": 1
            },
            {
              "billId": 2,
              "price": 700,
              "reqStuSubId": 1
            },
            {
              "billId": 7,
              "price": 2400,
              "reqStuSubId": 1
            }
          ],
          "reqStuSubId": 1,
          "studentId": 1,
          "subjectId": 1
        },
        {
          "subject": {
            "studentSS": [],
            "subjectId": 2,
            "subjectName": "Geography"
          },
          "billSS": [
            {
              "billId": 6,
              "price": 1000,
              "reqStuSubId": 2
            },
            {
              "billId": 9,
              "price": 424,
              "reqStuSubId": 2
            }
          ],
          "reqStuSubId": 2,
          "studentId": 1,
          "subjectId": 2
        }
      ],
      "studentId": 1,
      "studentName": "Hung"
    },
    {
      "subjectSS": [
        {
          "subject": {
            "studentSS": [],
            "subjectId": 3,
            "subjectName": "Physical"
          },
          "billSS": [
            {
              "billId": 5,
              "price": 900,
              "reqStuSubId": 7
            },
            {
              "billId": 8,
              "price": 745,
              "reqStuSubId": 7
            }
          ],
          "reqStuSubId": 7,
          "studentId": 2,
          "subjectId": 3
        }
      ],
      "studentId": 2,
      "studentName": "Manh"
    },
    {
      "subjectSS": [],
      "studentId": 3,
      "studentName": "Long"
    }
  ];

  constructor() {

  }

  ngOnInit() {
    this.data.map(x => {
      x.subjectSS.map(y => {
        let str = '';
        for (let i = 0; i < y.billSS.length; i++) {
          str += ((i === 0) ? '' : ',') + y.billSS[i].price;
        }
        y.subjectPrices = str;
      })

    })
    console.log(this.data);
  }

}

Your HTML File

<h3>List of Student</h3>
<div *ngFor="let key of data; index as studentId">
  <h2>
    <a>
      {{key.studentId}}
    </a>.
    {{key.studentName}}
  </h2>
  <div *ngFor="let elements of key.subjectSS">
    <b>Subject:</b><span [title]="'Học phí: ' + elements.subjectPrices">
      {{elements.subject.subjectName}}</span><br />
    <span>
      <div *ngFor="let billDetail of elements.billSS">

        <b>Bill:</b> {{billDetail.price}} VNĐ<br /></div>
    </span>
  </div>
</div>

This is output