使用子数组值读取 json 并使用 ngFor 在 html 上显示

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

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(",")];

Answer 2

"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(",") })

Answer 3

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 4

Everything's already been suggested, I'd just like to point out that you need to do split(', ') - with a space after comma - or your arrays will have strings like ' Java', '. net', ' Python' as well as 'Java', 'Kotlin' etc. If at some point you want to list all the languages (from all students), you don't want to have both 'Java' and ' Java' in it. Also, I guess it's just a typo, but ID key's value in object should end with comma.

Answer 5

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>