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

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"
 },
]

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.

CodePudding user response：

I guess you would like to merge all languages into one array. You can achieve it like this:

this.languages = [...this.languages, ...STUDENT_DATA[i].Languages.split(",")];

CodePudding user response：

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

STUDENT_DATA.map(s => { ...s, LanguageArray: s.Language.split(",") })