ionic display array result in template

Question

I am trying to display the results from an array into the html template. I need to display the tasks objects. Currently I can successfully console log the result but when I try to display it I get a blank ion-list. I am retrieving the array from Ionic storage.

[
  {
    "projects": {
      "projectname": "test",
      "dateadded": "09 April 2018, 6:29AM",
      "location": "us",
      "tasks": {
        "0": {
          "taskname": "test",
          "taskdescription": "test",
          "taskdealer": "test",
          "tasksupplier": "Technical",
          "taskdeadline": "2018-04-08"
        },
        "1": {
          "taskname": "test",
          "taskdescription": "test",
          "taskdealer": "test",
          "tasksupplier": "Technical",
          "taskdeadline": "2018-04-08"
        }
      }
    }
  }
]

My attempt

this.storage.get('projectsStore').then(data => {
  for (var i = 0; i < data.length; i++) {
      console.log(data[i].projects.tasks);
      this.tasks = [data[i].projects.tasks];
    }
})

<ion-list>
  <button ion-item no-padding *ngFor="let item of tasks">
    <h2>{{item.taskname}}</h2>
    <p>{{item.taskdeadline}}</p>
  </button>
</ion-list>

{ "0":{ "taskname":"test", "taskdescription":"test", "taskdealer":"test", "tasksupplier":"Technical", "taskdeadline":"2018-04-08" }, "1":{ "taskname":"test", "taskdescription":"test", "taskdealer":"test", "tasksupplier":"Technical", "taskdeadline":"2018-04-08" } } — RRB
– RRB, Commented Apr 9, 2018 at 4:58

Sunil Lama · Accepted Answer · 2018-04-09 05:26:55Z

2

You cannot repeat Object. Convert it to array like following. It should work like that:

this.storage.get('projectsStore').then(data => {
  for (var i = 0; i < data.length; i++) {
      console.log(data[i].projects.tasks);
      this.tasks = Object.values(data[i].projects.tasks);
    }
})

Check out this fiddle: https://jsfiddle.net/feLnekjb/1/ . Click to see your list getting repeated.

edited Apr 9, 2018 at 5:26

answered Apr 9, 2018 at 5:02

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

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

4 Comments

RRB Over a year ago

thanks but I get "[ts] Property 'values' does not exist on type 'ObjectConstructor'."

RRB Over a year ago

fixed the above error, but still get an empty display. If I display this <h2>{{item}}</h2> then I get [object, object],[object, object]. If I display this <h2>{{item.taskname}}</h2>, I get nothing

Sunil Lama Over a year ago

can you log your this.tasks after the above step and show here

RRB Over a year ago

[      {         "0":{            "taskname":"test",          "taskdescription":"test",          "taskdealer":"test",          "tasksupplier":"Technical",          "taskdeadline":"2018-04-08"       },       "1":{            "taskname":"test",          "taskdescription":"test",          "taskdealer":"test",          "tasksupplier":"Technical",          "taskdeadline":"2018-04-08"       }    } ]

Collectives™ on Stack Overflow

ionic display array result in template

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related