1

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>

enter image description here

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" } ]
Improve this question
2
  • please provide stackblitz Commented Feb 4, 2020 at 4:54
  • 1
    I just update few things. Hope this is enough for you. Commented Feb 4, 2020 at 5:00

1 Answer 1

Reset to default
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

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

9 Comments

No, I know how to do that. The reason why I call billDetail so soon it's because I want to display it inside the title also. If you call "billDetail" later then in the title before won't be able to show anything.
Can you give me sample output please
The left is the output of your solution and in the right is what I want to happen: imgur.com/a/qxwgOU8
I have changed my answer please check and let me know
Wow, I didn't know we can interact with json element right inside TS file. And your new solution put me with the error " Cannot read property 'map' of undefined"
|