0

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.

Rahul Singh
  • 19,030
  • 11
  • 64
  • 86
sadboy
  • 17
  • 1
  • 1
  • 7
  • 1
    change the tag cause this isnt angular 1.x – Bowofola May 13 '17 at 21:06
  • you have to make use of pipes , Angular pipes for displaying nested data in a json, can you post the json data . for reference http://stackoverflow.com/questions/35705424/deep-nested-json-to-array-in-array-json-rendering-of-angular-2-ngfor – Rahul Singh May 13 '17 at 21:06
  • Check this plunker: http://plnkr.co/edit/96JrD09Xn9whEhup2Atr?p=preview Do you have a data structure like this? – eko May 13 '17 at 21:23
  • @echonax I think not. its an array weeks that consists of four days arrays right? – sadboy May 13 '17 at 21:25
  • @sadboy yep. What does your array looks like, can you provide it in your question? – eko May 13 '17 at 21:26
  • @echonax does that provide you any information? http://oi65.tinypic.com/sp905u.jpg It's a console log from each weeks[i] – sadboy May 13 '17 at 21:29
  • @sadboy ok what is the day object like? Is it just a date object? – eko May 13 '17 at 21:40
  • @echonax Yeh, weeks[x][y] is a date object – sadboy May 13 '17 at 21:49

2 Answers2

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.

Federico Pettinella
  • 1,471
  • 1
  • 11
  • 19
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 )

bgrujoski
  • 121
  • 1
  • 1
  • 7