Week Number in separated Table

user_484390 0
Viewed 75

Goal:
A new table for each week number and its date and content.

A requested result of the sample is below

Week 53
1   asdf    Wed Dec 30 2020 00:00:00 GMT+0100 (Central European Standard Time)  53
2   asdf    Wed Dec 31 2020 00:00:00 GMT+0100 (Central European Standard Time)  53


Week 2
3   asdf    Fri Jan 15 2021 00:00:00 GMT+0100 (Central European Standard Time)  2
4   asdf    Fri Jan 16 2021 00:00:00 GMT+0100 (Central European Standard Time)  2


Week 3
5   asdf    Fri Jan 20 2021 00:00:00 GMT+0100 (Central European Standard Time)  3
6   asdf    Fri Jan 21 2021 00:00:00 GMT+0100 (Central European Standard Time)  3

For instance a new table for week 53, week 2 and week 3. (foodMenuId 1 and 2, belong to week 53, should be in the same table)

Problem:
I tried to solve it but I falied.
Do you have any idea about how to solve it?

Stackblitz:
https://stackblitz.com/edit/angular-ivy-pi7cdn?file=src/app/app.component.html
https://angular-ivy-pi7cdn.stackblitz.io

Thank you!

app.component.html

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>

<div *ngFor="let item of GetAllFoodMenu">

    <table border=1>
        <tbody>
            <ng-template [ngIf]="item.rn === 1">
                <tr>
                    <td colspan="3">Vecka {{ item.week }}</td>
                </tr>
            </ng-template>

            <tr>
                <td>{{ item.foodMenuId }}</td>
                <td>{{ item.foodName }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.week }}</td>
            </tr>
        </tbody>
    </table>


    <br />
</div>

app.component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  GetAllFoodMenu: FoodMenuDTO[] = [
    {
      foodMenuId: 1,
      foodName: "asdf",
      week: 53,
      rn: 1,
      date: new Date("2020-12-30T00:00:00")
    },
    {
      foodMenuId: 2,
      foodName: "asdf",
      week: 53,
      rn: 2,
      date: new Date("2020-12-31T00:00:00")
    },
    {
      foodMenuId: 3,
      foodName: "asdf",
      week: 2,
      rn: 3,
      date: new Date("2021-01-15T00:00:00")
    },
    {
      foodMenuId: 4,
      foodName: "asdf",
      week: 2,
      rn: 4,
      date: new Date("2021-01-16T00:00:00")
    },
    {
      foodMenuId: 5,
      foodName: "asdf",
      week: 3,
      rn: 5,
      date: new Date("2021-01-20T00:00:00")
    },
    {
      foodMenuId: 6,
      foodName: "asdf",
      week: 3,
      rn: 6,
      date: new Date("2021-01-21T00:00:00")
    }
  ];
}

export class FoodMenuDTO {
  public foodMenuId: number;
  public foodName: string;
  public week: number;
  public rn: number;
  public date: Date;
}
angular10 angular
1 Answers

UPDATED:

app.component.html

    <style>
    .divborder {
        border: 1px solid black;
        margin-bottom: 5px;
    }
</style>
<hello name="{{ name }}"></hello>
<div class="divborder" *ngFor="let item of FoodMenuConsolidated; let index=index">
    Week {{item.WeekDay}}

    <br>
    <div *ngFor="let row of item.FoodMenus">
        <table>
            <td>{{ row.foodMenuId }}</td>
            <td>{{ row.foodName }}</td>
            <td>{{ row.date }}</td>
            <td>{{ row.week }}</td>
        </table>
    </div>

</div>

app.component.ts

import { Component, VERSION, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;

  FoodMenuConsolidated: any[] = [];

  GetAllFoodMenu: FoodMenuDTO[] = [
    {
      foodMenuId: 1,
      foodName: "asdf",
      week: 53,
      rn: 1,
      date: new Date("2020-12-30T00:00:00")
    },
    {
      foodMenuId: 2,
      foodName: "asdf",
      week: 53,
      rn: 2,
      date: new Date("2020-12-31T00:00:00")
    },
    {
      foodMenuId: 3,
      foodName: "asdf",
      week: 2,
      rn: 3,
      date: new Date("2021-01-15T00:00:00")
    },
    {
      foodMenuId: 4,
      foodName: "asdf",
      week: 2,
      rn: 4,
      date: new Date("2021-01-16T00:00:00")
    },
    {
      foodMenuId: 5,
      foodName: "asdf",
      week: 3,
      rn: 5,
      date: new Date("2021-01-20T00:00:00")
    },
    {
      foodMenuId: 6,
      foodName: "asdf",
      week: 3,
      rn: 6,
      date: new Date("2021-01-21T00:00:00")
    }
  ];

  ngOnInit() {
    var data = this.GetAllFoodMenu;
    var uniqueWeek = new Array();

    for (var i = 0; i < data.length; i++) {
      if (uniqueWeek.indexOf(data[i].week) < 0) {
        uniqueWeek.push(data[i].week);
      }
    }
    console.log(uniqueWeek.length);
    for (var i = 0; i < uniqueWeek.length; i++) {
      let data: any = {};
      data.WeekDay = uniqueWeek[i];
      data.FoodMenus = this.GetAllFoodMenu.filter(x => x.week == uniqueWeek[i]);
      this.FoodMenuConsolidated.push(data);
      console.log(data);
    }
  }
}

export class FoodMenuDTO {
  public foodMenuId: number;
  public foodName: string;
  public week: number;
  public rn: number;
  public date: Date;
}

OUTPUT

enter image description here

You need to create another object with unique week numbers & then array of food items with each week number

user_30361230
Related