CODEWITHSUNDEEP
htmlangular
WeelCodeur
WeelCodeur

Reputation: 143

How to loop on an object with a NgFor?

In my case i have a lot of students with name, email, phone ect ... and a object note :

{
    "_id" : ObjectId("5b9551a60e89ad15a8ff77fb"),
    "name" : "RICHE",
    "note" : [ 
        {
            "matiere" : "Français",
            "note" : "10/20",
            "date" : "01/09/2018"
        }, 
        {
            "matiere" : "Mathématique",
            "note" : "13/20",
            "date" : "11/09/2012"
        }, 
        {
            "matiere" : "Anglais",
            "note" : "07/20",
            "date" : "26/09/2018"
        }, 
        {
            "matiere" : "Anglais",
            "note" : "06/20",
            "date" : "13/11/2018"
        }, 
        {
            "matiere" : "EPS",
            "note" : "20/20",
            "date" : "29/11/2012"
        }
    ]
}

with ngFor i can create a loop on name, firsname, phone, email ect ... but not on note

<tr *ngFor="let kk of Repdata | filterdata: queryString : 'name' | orderBy: order; let ind = index">
    <td>{{ind + 1}}</td>
    <td>{{kk.name}}</td>
</tr>

I create a modal with a table in the same of my ngFor and i can display name ect ... but when i try this :

    <tr>
      <td>Matière : </td><td>{{kk.note}}</td>
    </tr>

I create a loop with the message [object Object], and when i try this :

<tr>
<td>Matière : </td><td>{{kk.note.matiere}}</td>
</tr>

Nothing was display

Upvotes: 0

Views: 33

Answers (1)

Dmitriy Snitko
Dmitriy Snitko

Reputation: 960

That's because in your scope kk.note is an array kk.note.matiere is undefined so you also have to loop through it:

<tr *ngFor="let r of kk.note">
    <td>Matière : </td>
    <td>{{r.matiere}}</td>
</tr>

Upvotes: 1

Related Questions