How to access elements within array of arrays in Angular 4 based on indexing?

Question

I want to iterate only the first element of the array in a table in Angular 4 (for TV AD 1, for weeks ranging from 2/10/2017 to 29/1/2018).But I am facing challenge as it is iterating over all the elements of the table(for all TV ads 1,2,3,4).

Please find my code below: JSON:

      public calendarTable = [
      { name: "TV AD1", 
          weeks: [
          { period: "2/10/2017", price: "400" },
          { period: "9/10/2017", price: "800" },
          { period: "16/10/2017", price: "200" },
          { period: "23/10/2017", price: "500" },
          { period: "30/10/2017", price: "600" },
          { period: "6/11/2017", price: "800" },
          { period: "13/11/2017", price: "700" },
          { period: "20/11/2017", price: "800" },
          { period: "27/11/2017", price: "900" },
          { period: "4/12/2017", price: "400" },
          { period: "11/12/2017", price: "800" },
          { period: "18/12/2017", price: "200" },
          { period: "25/12/2017", price: "500" },
          { period: "1/1/2018", price: "600" },
          { period: "8/1/2018", price: "800" },
          { period: "15/1/2018", price: "700" },
          { period: "22/1/2018", price: "800" },
          { period: "29/1/2018", price: "900" }
          ]
      },
      { name: "TV AD2", 
          weeks: [
            { period: "2/10/2017", price: "500" },
            { period: "9/10/2017", price: "600" },
            { period: "16/10/2017", price: "700" },
            { period: "23/10/2017", price: "800" },
            { period: "30/10/2017", price: "900" },
            { period: "6/10/2017", price: "100" },
            { period: "13/10/2017", price: "200" },
            { period: "20/10/2017", price: "300" },
            { period: "27/10/2017", price: "400" },
            { period: "4/12/2017", price: "400" },
            { period: "11/12/2017", price: "800" },
            { period: "18/12/2017", price: "200" },
            { period: "25/12/2017", price: "500" },
            { period: "1/1/2018", price: "600" },
            { period: "8/1/2018", price: "800" },
            { period: "15/1/2018", price: "700" },
            { period: "22/1/2018", price: "800" },
            { period: "29/1/2018", price: "900" }
            ]
          },

      { name: "TV AD3",
          weeks: [
            { period: "2/10/2017", price: "500" },
            { period: "9/10/2017", price: "600" },
            { period: "16/10/2017", price: "700" },
            { period: "23/10/2017", price: "800" },
            { period: "30/10/2017", price: "900" },
            { period: "6/10/2017", price: "100" },
            { period: "13/10/2017", price: "200" },
            { period: "20/10/2017", price: "300" },
            { period: "27/10/2017", price: "400" },
            { period: "4/12/2017", price: "400" },
            { period: "11/12/2017", price: "800" },
            { period: "18/12/2017", price: "200" },
            { period: "25/12/2017", price: "500" },
            { period: "1/1/2018", price: "600" },
            { period: "8/1/2018", price: "800" },
            { period: "15/1/2018", price: "700" },
            { period: "22/1/2018", price: "800" },
            { period: "29/1/2018", price: "900" }
            ]
          },

      { name: "TV AD4",
        weeks: [
          { period: "2/10/2017", price: "500" },
          { period: "9/10/2017", price: "600" },
          { period: "16/10/2017", price: "700" },
          { period: "23/10/2017", price: "800" },
          { period: "30/10/2017", price: "900" },
          { period: "6/10/2017", price: "100" },
          { period: "13/10/2017", price: "200" },
          { period: "20/10/2017", price: "300" },
          { period: "27/10/2017", price: "400" },
          { period: "4/12/2017", price: "400" },
          { period: "11/12/2017", price: "800" },
          { period: "18/12/2017", price: "200" },
          { period: "25/12/2017", price: "500" },
          { period: "1/1/2018", price: "600" },
          { period: "8/1/2018", price: "800" },
          { period: "15/1/2018", price: "700" },
          { period: "22/1/2018", price: "800" },
          { period: "29/1/2018", price: "900" }
            ]
          }
   ]

HTML:

  <thead>
                    <tr class="black-muted-bg" *ngFor="let item of calendarTable" >
                        <th class="align-right" *ngFor="let data of item.weeks">{{data.period}}</th>

                    </tr>
                </thead>

Please assist me in this regard

Direct use first element and then iterate on weeks.

Kaustubh Khare
– Kaustubh Khare

2017-10-18 07:23:30 +00:00
Commented Oct 18, 2017 at 7:23 — Kaustubh Khare
– Kaustubh Khare, Commented Oct 18, 2017 at 7:23

Himanshu Bansal · Accepted Answer · 2017-10-18 07:45:30Z

1

Just add [0] to your calenderTable... check the code below...

<thead>
                <tr class="black-muted-bg" *ngFor="let item of calendarTable[0]" >
                    <th class="align-right" *ngFor="let data of item.weeks">{{data.period}}</th>

                </tr>
            </thead>

or you could go like this...

<thead>
                <tr class="black-muted-bg"  >
                    <th class="align-right" *ngFor="let data of calendarTable[0].weeks">{{data.period}}</th>

                </tr>
            </thead>

edited Oct 18, 2017 at 7:45

answered Oct 18, 2017 at 7:27

Himanshu Bansal

2,1131 gold badge26 silver badges49 bronze badges

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

3 Comments

Neha Uniyal Over a year ago

Brilliant.Thank you.

Neha Uniyal Over a year ago

Also could you please suggest on how to add pagination to the table.

Himanshu Bansal Over a year ago

sure... check it here expertphp.in/article/…...

brk · Accepted Answer · 2017-10-18 07:21:11Z

0

Extract the array & keep it in a variable before looping.Since calendarTable is an array of object calendarTable[0] will give first object & calendarTable[0].weeks will give value of the week key from that object

var toLoop = calendarTable[0].weeks;

answered Oct 18, 2017 at 7:21

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

MarkiE · Accepted Answer · 2017-10-18 07:28:15Z

0

Take the first item of an array(calendarTable) and loop through weeks.

<thead>
   <tr class="black-muted-bg">
       <th class="align-right" *ngFor="let data of calendarTable[0].weeks">
           {{data.period}}
       </th>
   </tr>
</thead>

answered Oct 18, 2017 at 7:28

MarkiE

833 silver badges8 bronze badges

Comments

Matt Arau · Accepted Answer · 2017-10-18 08:16:41Z

If you need to dynamically select each of the table's object, you can do like this:

In your service:

private calendarTable = [
  // this is the table you already have
];

getAdsNames(): string[] {
  return Array.from(this.calendarTable, ad => ad.name);
}

getAd(adName: string): any {
  return this.calendarTable.filter(ad: => ad.name === adName)[0];
}

In your component:

availableAds: string[];
activeAd: any;

ngOnInit() {
  this.availableAds = this.myService.getAdsNames();

  // Loads the first ad from the list
  this.activeAd = this.setActiveAd(this.availableAds[0]);
}

setActiveAd(adName: string) {
  this.activeAd = this.myService.getAd(adName);
}

In your template:

<thead>
  <tr class="black-muted-bg">
    <th class="align-right" *ngFor="let week of activeAd.weeks">{{week.period}}</th>
  </tr>
</thead>

<!-- Change between different ads -->
<select [(ngModel)]="selectedAd" (ngModelChange)="setActiveAd($event)">
  <option *ngFor="let ad of availableAds" [ngValue]="ad">
    {{ ad }}
  </option>
</select>

If you don't need to dynamically change the ads, you should still use a service to handle your data and simply request the value when you need it (e.g. On component's init - within the ngOnInit method) and making it available for the template.

P.S.: You should avoid using any as I have used (to simplify the example) and create a model for your ads.

Cheers

Collectives™ on Stack Overflow

How to access elements within array of arrays in Angular 4 based on indexing?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related