Problem during accessing nested array objects in angular2

Question

How can i access the array structure given below. if i am trying this *ngFor="let item of bookedItems[0]" i think its allow me to access only array[0] data. what about array[1], array[2]....array[n]. how i get them?

  [Array(2)]
      0: Array(2)
        0: {id: 2, name: "Calark", price: 375, …}
        1: {id: 5, name: "Eternis", price: 450, …}
        length: 2
      __proto__: Array(0)
      length: 1
      __proto__: Array(0)

inside component

export class BookingComponent implements OnInit {
  bookedItems = [];
  constructor(private bookingService:BookingService) { }

  ngOnInit(){
    this.bookedData();
    console.log(this.bookedItems);
  }

  bookedData(){
    this.bookedItems = this.bookingService.getBookedItem();
  }
}

inside template

<h3>Your Bookings:</h3>
<div *ngIf="bookedItems.length > 0; else plainText">
  <div class="cart-item" *ngFor="let item of bookedItems[0]">
<div class="flip-card">
  <div class="flip-card-inner">
          <div class="flip-card-front">
            <img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 305px" width="293px">
          </div>


          <div class="flip-card-back">
            <small>
                  <p>Name: {{item.name}}</p>
                  <p>Size: {{item.size}}</p>
                  <p>Price: {{item.price}}</p>
                  <p>City: {{item.city}}</p>
                  <p>Address: {{item.address}}</p>
            </small>
          </div>

     </div>
     </div><hr/>
  </div>
</div>


<ng-template #plainText>
  <p>You haven't booked any item. please book to get your booking details!!!</p>
</ng-template>

can you please post a bit more of what you've tried so far

digital-pollution
– digital-pollution

2019-11-25 21:00:15 +00:00
Commented Nov 25, 2019 at 21:00 — digital-pollution
– digital-pollution, Commented Nov 25, 2019 at 21:00
@digital-pollution sure u can check now

user12381136
– user12381136

2019-11-25 21:03:08 +00:00
Commented Nov 25, 2019 at 21:03 — user12381136
– user12381136, Commented Nov 25, 2019 at 21:03

millenion · Accepted Answer · 2019-11-25 21:45:15Z

1

I think you'll definetly need a double loop here, unless the fact you have a nested array is a bug. In case it's not, you should probably use "ng-container" directive like this =>

<h3>Your Bookings:</h3>
<div *ngIf="bookedItems.length > 0; else plainText">
  <ng-container *ngFor="let bookedItem of bookedItems">
    <div class="cart-item" *ngFor="let item of bookedItem">
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 305px"
                 width="293px">
          </div>
          <div class="flip-card-back">
            <small>
              <p>Name: {{item.name}}</p>
              <p>Size: {{item.size}}</p>
              <p>Price: {{item.price}}</p>
              <p>City: {{item.city}}</p>
              <p>Address: {{item.address}}</p>
            </small>
          </div>
        </div>
      </div>
      <hr/>
    </div>
  </ng-container>
</div>


<ng-template #plainText>
  <p>You haven't booked any item. please book to get your booking details!!!</p>
</ng-template>

I hope it helped you a bit.

answered Nov 25, 2019 at 21:45

millenion

2,01421 silver badges20 bronze badges

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

2 Comments

user12381136 Over a year ago

what's the role of <ng-container> here?

millenion Over a year ago

Sometimes you don't wanna create a useless div or whatever html block just to be able to iterate over arrays.

acincognito · Accepted Answer · 2019-12-19 07:00:19Z

1

Sorry, I didnt realize, that the array is nested. You could try a double loop:

  <div class="cart-item" *ngFor="let item of bookedItems">
    <div class="flip-card" *ngFor="let innerItem of item">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img [src]="innerItem.imagePath" alt="{{innerItem.name}}" class="img-responsive" style="max-height: 305px" width="293px">
        </div>


        <div class="flip-card-back">
          <small>
              <p>Name: {{innerItem.name}}</p>
              <p>Size: {{innerItem.size}}</p>
              <p>Price: {{innerItem.price}}</p>
              <p>City: {{innerItem.city}}</p>
              <p>Address: {{innerItem.address}}</p>
          </small>
        </div>

     </div>
    </div><hr/>
 </div>

If I'd face this issue, I would flatten the arrays first, given that there's only one level of nesting.

edited Dec 19, 2019 at 7:00

answered Nov 25, 2019 at 21:02

acincognito

1,7531 gold badge16 silver badges25 bronze badges

1 Comment

user12381136 Over a year ago

If i am doing this *ngFor="let item of bookedItems" i am not able to access {{item.name}} {{item.price}}.... and so on..

Collectives™ on Stack Overflow

Problem during accessing nested array objects in angular2

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related