CODEWITHSUNDEEP
javascriptarraysangularionic-frameworkionic3
RRB
RRB

Reputation: 2116

ionic display array result in template

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>

Upvotes: 1

Views: 1456

Answers (1)

Sunil Lama
Sunil Lama

Reputation: 4539

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.

Upvotes: 2

Related Questions