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
– Smern, Commented Jan 4, 2022 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
– Kinglish, Commented Jan 4, 2022 at 20:34

Kinglish · Accepted Answer · 2022-01-04 20:40:54Z

1

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>

answered Jan 4, 2022 at 20:40

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

Comments

Smern · Accepted Answer · 2022-01-04 20:44:34Z

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"

edited Jan 4, 2022 at 20:44

answered Jan 4, 2022 at 20:39

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Comments

Marko Eskola · Accepted Answer · 2022-01-04 20:58:33Z

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 4, 2022 at 20:58

Marko Eskola

8286 silver badges12 bronze badges

4 Comments

Devops_Dev Over a year ago

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"

Marko Eskola Over a year ago

Try to declare or initialize the STUDENT_DATA variable inside StudentDataComponent.

Devops_Dev Over a year ago

It outputs data with all subjects for each student. Anything I am missing here. Appreciated your help

Marko Eskola Over a year ago

We should really see the code in order to give further guidance. Would you like to publish your code on Stackblitz?

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related