CODEWITHSUNDEEP
javascriptarraysangular
Neha Uniyal
Neha Uniyal

Reputation: 175

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

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

Upvotes: 0

Views: 3794

Answers (4)

mattarau
mattarau

Reputation: 2512

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

Upvotes: 0

Himanshu Bansal
Himanshu Bansal

Reputation: 2093

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>

Upvotes: 1

MarkiE
MarkiE

Reputation: 83

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>

Upvotes: 0

brk
brk

Reputation: 50346

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;

Upvotes: 0

Related Questions