Read the json with sub array values and display on the html using ngFor

Question

Hi I am developing a web app where I am display a student data received in json format.

Here is the typescript code snippet

    export interface studentData{
      ID : number;
      Name :string;
      Class : string;
      Languages: string;
    }
    
    const STUDENT_DATA: studentData[] = 
    [
     {
      ID : 1
      Name: "Amy",
      Class: "Grade1",
      Languages: "Java, .net, Python"
     },
     {
      ID : 2
      Name: "John",
      Class: "Grade2",
      Languages: "Kotlin, Java, Typescript"
     },
     {
      ID: 3
      Name: "Shawn",
      Class: "Grade3",
      Languages: "Javascript, C++, Perl"
     },
    ]
export class StudentDataComponent{
       languages : string[] = [];
    for (let i=0; i <= STUDENT_DATA.length - 1 ; i++)
     {
       this.languages = STUDENT_DATA[i].Languages.split(",");
     }
}

I tried to make Languages as separate array and thought to use it while displaying on screen using ngFor

languages : string[] = [];
for (let i=0; i <= STUDENT_DATA.length - 1 ; i++)
 {
   this.languages = STUDENT_DATA[i].Languages.split(",");
 }

I tried to display in mat-chip-list as shown below but it just displays ID 3 languages for all ID's

<mat-chip-list>
   <mat-chip *ngFor = "let lang of languages>
         {{lang}}
   </mat-chip>
</mat-chip-list>

Need help to read the languages json value and display over screen.

Answer 1

"it just displays ID 3 languages for all ID's"

this is because you are setting this.language to the first, then the second... at the end it just ends up being the last item. You don't have a separate one for each student.

I think a better alternative would be to add a property on each student object. Something like:

this.students = STUDENT_DATA.map(s => {
    ...s,
    LanguageArray: s.Language.split(",").map(l => l.trim())
});

then this would just be part of the student data which I assume you are looping through outside of the mat-chip.. so you could do something like *ngFor="let lang of student.LanguageArray inside of your *ngFor="let student of students"

Answer 2

If you're just wanting to loop through the languages string for each student in the loop, you can do your split() inline with a second ngFor, as in

<div *ngFor="let student of STUDENT_DATA">
 <!-- .... -->
  <mat-chip-list>
     <mat-chip *ngFor="let lang of student.languages.split(',')">
         {{lang}}
     </mat-chip>
  </mat-chip-list>
</div>

Answer 3

Your code currently overwrites the language variable during every iteration. Modify the type of languages and add index also to languages variable:

let languages: string[][] = [];

for (let i = 0; i <= STUDENT_DATA.length - 1; i++) {
    languages[i] = STUDENT_DATA[i].Languages.split(",");
}

Code should be something like that:

<student-element *ngFor="let student of STUDENT_DATA; index as i">
// Element code here
<mat-chip-list>
  <mat-chip *ngFor = "let lang of languages[i]">
    {{lang}}
  </mat-chip>
</mat-chip-list>
</student-element>