How to display values of two arrays next to each other in a new line? Ionic/HTML-CodePudding

I have two arrays in my database and I'm trying to display their values next to each other in HTML. And once first value is displayed, next value must be displayed in new line.

Typescript code:

fetchBookings() {
this.afs
  .collection('user')
  .doc(this.userId)
  .collection('BookingHistory')
  .get()
  .subscribe((querySnapshot) => {
    this.storedData = querySnapshot.docs.map((e) => {
      return { 
        bookingDate: e.data()['BookingDate'],
        timeSlot: e.data()['Timeslots'],
      };
    });
  });

HTML code:

<ion-content>
<ion-button expand="block" shape="round" (click)="fetchBookings()">Show History</ion-button>
<ion-item *ngFor="let data of storedData">
    <ion-grid>
        <ion-col> Date: {{data.timeSlot}} </ion-col>
        <ion-col> Time: {{data.bookingDate}} </ion-col>
    </ion-grid>
</ion-item>

The result that I'm getting:

Time: 3 PM - 4 PM,9 PM - 10 PM,5 PM - 6 PM,9 PM - 10 PM

Date: November 30 2021,December 06 2021,December 01 2021,December 04 2021

The result that I want:

Date: November 30 2021 Time: 3PM - 4PM

Date: December 06 2021 Time: 9PM - 10PM

Date: November 01 2021 Time: 5PM - 6PM

and so on...

Is there simple way to do it? Thanks in advance!

CodePudding user response：

Setting ion-grid within ion-item doesnt get you items in new line. Use ion-grid separately.

<ion-content>
<ion-button expand="block" shape="round" (click)="fetchBookings()">Show History</ion-button>
<ion-grid>
    <ion-row *ngFor="let data of storedData"> <!-- each data in its row -->
        <ion-col> Date: {{data.bookingDate}} </ion-col>
        <ion-col> Time: {{data.timeSlot}} </ion-col>
    </ion-row>
</ion-grid>

CodePudding user response：

So, after an hour of trying to figure out how to display two arrays together, I gave up...

I just merged those two arrays into one, and finally got the desired output.

P.s @Suraj Rao thanks for your answer, but that doesn't really work with two arrays. I mean, it displays separately, not next to each other.