Ionic 4 - Show api json response data in table

Ionic Framework
1

Hi,

I want to show the response data i get from the api in a table. I use a ng-repeat for this, but strangly enough i keep getting an undefined error, but if i console.log the entire variable i see my data.

.ts

export class HoursPage implements OnInit {
    data:any = {};
    table: any[] = [];

    constructor(public http: Http, public navCtrl: NavController, private menu: MenuController) {
        this.data.User = 320
        this.data.Token = asd2cb345nx93vnnv94vn
        this.data.expire = 14-03-2019 23:59:59
        this.table;
    }
this.http.get('https://foo/foo/app/index.php?type='+option+'&user_id='+this.data.User+'&token='+this.data.Token, requestOptions)
        .pipe(map(res => res.json()))
        .subscribe(data => {
            for (let i = 0; i < data.length; i++) {
                this.table.push(data[i]);
            }
            //console.log(this.table);

.html

<div class="row" ng-repeat="x in table; let i = index"> 

        <div class="col">{{x.id}}</div> 
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col">make checkbox</div>

</div>

Json data

0: {id: "30123", date_created: "2019-01-28 11:33:29", created_by_user_id: "390",…}
created_by_user_id: "3920"
created_by_user_name: "foo bar"
created_for_user_id: "3920"
created_for_user_name: "foo bar"
date_created: "2019-01-28 11:33:29"
description: ""
end: "17:00:00"
incoming_date: "2019-01-28"
incoming_type_description: "foo"
incoming_type_id: "3"
not_here: "0"
id: "3015523"
breakminutes: "30"
start: "08:30:00"
total_num_minutes: "480"
1: {id: "3015567", date_created: "2019-01-29 16:44:09", created_by_user_id: "390",…}
2: {id: "3025530", date_created: "2019-01-31 08:38:16", created_by_user_id: "390",…}
3: {id: "3025531", date_created: "2019-01-31 08:38:54", created_by_user_id: "390",…}
4: {id: "3025574", date_created: "2019-02-01 16:44:44", created_by_user_id: "390",…}

i have looked all over but nothing seems to work.

i keep getting the same console error on the HTML output

ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateRenderer] (HoursPage.html:50)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:23927)
    at checkAndUpdateView (core.js:23302)
    at callViewAction (core.js:23538)
    at execComponentViewsAction (core.js:23480)
    at checkAndUpdateView (core.js:23303)
    at callViewAction (core.js:23538)
    at execEmbeddedViewsAction (core.js:23501)
    at checkAndUpdateView (core.js:23298)
    at callViewAction (core.js:23538)

i want all json data to be automatically filled in the table.

i tried to assign every array to a variable of this.table

for (let i = 0; i < data.length; i++){
                this.table = [{
                    created_by_user_id : data[i]['created_by_user_id'],
                    created_by_user_name : data[i]['created_by_user_name'],
                    created_for_user_id : data[i]['created_for_user_id'],
                    created_for_user_name : data[i]['created_for_user_name'],
                    date_created : data[i]['date_created'],
                    description : data[i]['description'],
                    id : data[i]['id']
                }].push()

but if i console log for example this.table.id then i get undefined.

2

issue has been solved.

changed ng-repeat to *ngFor and instead of using the made variable, i use the variable which already had the data.

so

<div class="row" *ngFor="let x in table; index i = index">
        <div class="col">{{table[i]['id']}}</div> 
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col">make checkbox</div>
</div>