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.

Does your actual code miss the end quote in your ngFor? Also, it looks like `this.languages` would just end up being the languages for the last student. — Smern, Jan 04 '22 at 20:32
Why are looping through student data and recreating the scope variable `this.languages` with each one? Do you mean to be creating a separate array for each student? — Kinglish, Jan 04 '22 at 20:34

Smern · Answer 1 · 2022-01-04T20:44:34.480

"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"

score 1 · Answer 2 · answered Jan 04 '22 at 20:40

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>

score 0 · Answer 3 · answered Jan 04 '22 at 20:58

0

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>

answered Jan 04 '22 at 20:58

Marko Eskola

717
4
11

Thank you for your reply. STUDENT_DATA array of type studentData is declared SutdentDataComponent so when I use the STUDENT_DATA in HTML I am getting "Error occurs on the template of component StudentDataComponent" – Devops_Dev Jan 04 '22 at 21:23
Try to declare or initialize the STUDENT_DATA variable inside StudentDataComponent. – Marko Eskola Jan 04 '22 at 21:42
It outputs data with all subjects for each student. Anything I am missing here. Appreciated your help – Devops_Dev Jan 04 '22 at 21:56
We should really see the code in order to give further guidance. Would you like to publish your code on Stackblitz? – Marko Eskola Jan 04 '22 at 22:26

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

3 Answers3