Ngfor list of object and loop again from an array inside one of the object in the main array

Question

Hi I have the following data structure,

this._days=[

            {
               "day": "",
               "timing": {}
            },
            {
               "day": "Monday",
               "timing": [
                       {'9:00AM-10:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'10:00AM-11:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'11:00AM-12:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'12:00AM-13:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'13:00AM-14:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}
                    ]
            },
            {
               "day": "Tuesday",
               "timing": [
                       {'9:00AM-10:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'10:00AM-11:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'11:00AM-12:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'12:00AM-13:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'13:00AM-14:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}
                    ]
            },
...

And I wanna display the values like

In my html i tried,

<table width="100%" align="center" height=100%;>
    <tr class="day">
        <th *ngFor="let row of _days">{{row.day}}</th>
    </tr>
    <tr class="time" *ngFor="let x of _days.timing">
        <th style="width:100px">{{_days.timing[x][key]}}</th>
            <td>{{_days.timing[x].value}}</td>
    </tr>
</table>

Is there anyway, I can achieve this in my html so that i can get the expected result as shown in the picture. Thanks in advance guys.

here you are wrong <tr class="time" *ngFor="let x of _days.timing"> here you assigned _days.timing which is nothing — Pardeep Jain
– Pardeep Jain, Commented Apr 10, 2017 at 5:47

madalinivascu · Accepted Answer · 2017-04-10 06:43:26Z

1

First you will need to filter your data based on the time

var tabelRows = {};
var firstRow = [];
_days.forEach(function(v,i){
   v.timing.forEach(function(val,ind) {
      var row = Object.keys(val)[0];
      if(firstRow.indexOf(row) == -1) {
           firstRow.push(row);
           tabelRows[row] = [val[row]];
      } else {
      tabelRows[row].push(val[row]);
      }
   });
});

then do the forEach loop you do something like:

<tr class="time" *ngFor="let x of firstRow">
        <th style="width:100px">{{x}}</th>
            <td *ngFor="let y of tabelRows[x]">{{y.subject}}</td>
    </tr>

answered Apr 10, 2017 at 6:43

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

Ngfor list of object and loop again from an array inside one of the object in the main array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related