Ionic angular dynamic grid display of a json

Issue

This is how I get my data back from the backend service:

(2) [{…}, {…}]
0: {date: "2021-05-17", time: "+4:56"}
1: {date: "2021-05-18", time: "+5:34"}

How would i dynamically create an ionic grid for the needed size of the retrieved data in json format?

In this case I want the grid to have 2 rows and 2 columns and in each row, there would be date in the first column and time in the second one.

I saw a ngFor* operator, but I don't know how to use it on the retrieved data that is stored in a model called "retrievedData". I can easily access data with the retrievedData[0][0] in typescript file (where the data is retrieved) and get the result "2021-05-17", but I don't know how to do it dynamically in the html file, where i should forloop through the retrievedData and display it as I described above.

Solution

html code

<ion-row *ngFor="let item of retrievedData" >
        <ion-col size="6">{{item?.date}}</ion-col>
        <ion-col size="6">{{item?.time}}</ion-col>
      </ion-row>

ts code

public retrievedData = [
    { date: "2021-05-17", time: "+4:56" },
    { date: "2021-05-18", time: "+5:34" }
  ]

Answered By - Ravi Ashara