CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
Tushar Kotecha
Tushar Kotecha

Reputation: 774

How to get Array of Array in ionic?

How to get startTime and endTime of an Object inside of an Array?

<ion-col *ngFor="let col of timetable" >
        <ion-row  *ngFor="let item in col">
                   {{item.StartTime}}-{{item.EndTime}}<br>{{item.SubjectName}}
       </ion-row>
</ion-col>

I want to display in the HTML each data in one column and different row for every array of objects. I have done the HTML part, but its not showing me the data and also I have achieved this through TypeScript nested for loop then it and it printed different objects:

for (let temp of temptab) {
     for (let tmp of temp) {
         console.log(JSON.stringify(tmp));
     }
}

Output :

{
"startTime" : 08:30:00,
"endTime" : 08:55:00,
"subjectName" : English
}

My JSON data :

{
  "response": "OK",
  "res": true,
  "timetable": [
    [
      {
        "startTime": "08:30:00",
        "endTime": "08:55:00",
        "subjectName": "English"
      },
      {
        "startTime": "09:00:00",
        "endTime": "09:55:00",
        "subjectName": "English"
      },
      {
        "startTime": "10:00:00",
        "endTime": "10:55:00",
        "subjectName": "Spanish/French"
      },
      {
        "startTime": "11:00:00",
        "endTime": "11:55:00",
        "subjectName": "ICT"
      },
      {
        "startTime": "12:00:00",
        "endTime": "12:45:00",
        "subjectName": "Lunch break"
      }
    ]
]

Upvotes: 2

Views: 6283

Answers (1)

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

There's some errors in your code, most of then are syntax errors.

1 - Your second *ngFor is wrong, it's not let item in col it must be let item of col or it'll throw an error saying the property doesn't know *ngForIn because it's an *ngForOf.

2 - The properties name are wrong, in your JSON they start with lowercase letters (startTime) and in your template you're accessing them with uppercase ({{item.StartTime}}), so it can't access since it doesn't exists.

3 - Your grid is wrong, the row must come first and then the col, so it must be:

<ion-row>
  <ion-col></ion-col>
</ion-row>

Also you need to add the column attributes so it can have the desired size, check the grid docs to learn how to do this.

4 - This is not an error since i can't see your full code, so i'm assuming you've passed the timetable of your JSON response to a separated property/variable. But if not you must change your first *ngFor to reflect it so it can be something like *ngFor="let col of myVariable.timetable".

Hope this helps.

Upvotes: 1

Related Questions