Greetings! I am currently working on a web application where I need to showcase student data that is being received in JSON format.
Below is the TypeScript code snippet that outlines the structure of the student data:
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 have attempted to separate the "Languages" into an array and plan to utilize it for display purposes using ngFor directive.
languages : string[] = [];
for (let i=0; i <= STUDENT_DATA.length - 1 ; i++)
{
this.languages = STUDENT_DATA[i].Languages.split(",");
}
In my efforts to display the information using mat-chip-list, I encountered a challenge where it only shows ID 3 languages for all IDs.
<mat-chip-list>
<mat-chip *ngFor = "let lang of languages>
{{lang}}
</mat-chip>
</mat-chip-list>
If anyone has suggestions on how to correctly read the languages from the JSON value and properly display them on the screen, your assistance would be greatly appreciated.