Nested arrays/objects using NgFor

Question

I'm creating a scheduler/calendar, but I have to built my own from scratch.

I have an array of days per month. For example May: 31 days. Now I want to seperate that array into weeks, and then display using a table. (like a calendar)

Please take into consideration that later on, I will have to make these 'days' clickable to be able to perform further actions on them.

What I tried:

I tried to do a nested array weeks[week_number][day_number]. However when trying to show the days the following code does not work at all. It shows nothing.

<tr *ngFor="let week of weeks; let i = index">
<td *ngFor="let day of week.days; let j = index "> {{ day }}</td>

I have looked up StackOverflow but could not find anything.

you have to make use of pipes , Angular pipes for displaying nested data in a json, can you post the json data . for reference stackoverflow.com/questions/35705424/… — Rahul Singh
– Rahul Singh, Commented May 13, 2017 at 21:06
Check this plunker: plnkr.co/edit/96JrD09Xn9whEhup2Atr?p=preview Do you have a data structure like this? — eko
– eko, Commented May 13, 2017 at 21:23
@echonax I think not. its an array weeks that consists of four days arrays right? — sadboy
– sadboy, Commented May 13, 2017 at 21:25
@sadboy yep. What does your array looks like, can you provide it in your question? — eko
– eko, Commented May 13, 2017 at 21:26

Federico Pettinella · Accepted Answer · 2017-05-14 01:12:59Z

0

If you're using a 2D Array, how are you expecting to access the days in the week using week.days?

Doing let week of weeks in the first *ngFor means that the week variable is now equal to a 1D array of days (a.k.a. weeks[i]).

Therefore your nested loop should simply be let day of week instead of let day of week.days.

answered May 14, 2017 at 1:12

Federico Pettinella

1,5211 gold badge11 silver badges20 bronze badges

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

Comments

bgrujoski · Accepted Answer · 2017-06-15 15:14:06Z

0

// First you have to loop through each 'week' Object:

<tr *ngFor="let week of weeks">

// Then you have to loop through each 'day' Object of the child Array of Objects that are containing your days

<td *ngFor="let day of week.days"> {{ day.name }}</td>

// {{ day.name }} represents your 'name' Object property if exists ( it may be used under different convention )

answered Jun 15, 2017 at 15:14

bgrujoski

1211 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Nested arrays/objects using NgFor

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related