How can i show locally stored array objects on html page in a list?

Question

Below is the data in my local storage -

key - education value - [{"title":"saurabh","description":"dd","tagline":"tt","date":"dd"},{"title":"aman","description":"dd","tagline":"tt","date":"dd"},{"title":"jessica","description":"dd","tagline":"tt","date":"dd"},{"title":"rosh","description":"dd","tagline":"tt","date":"dd"}]

I want to show each

title , description line by line on my page

my test.ts

fetchdata = '';
  ionViewDidLoad() {

    this.fetchdata = localStorage.getItem('education'); 
// what do i do next to show this on `test.html`
  }

my test.html

<ion-header>

    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Education</ion-title>
    </ion-navbar>

  </ion-header>


<ion-content padding>

    <button ion-button item-right>
        <ion-icon name="md-add-circle" (click)="save();"></ion-icon>
      </button>

</ion-content>

Rici · Accepted Answer · 2017-09-01 09:10:38Z

2

First of all you can't save object in storage, but only string. So to save your object you have to:

localStorage.setItem('education', JSON.stringify(data));

and to read that as object

this.fetchdata = JSON.parse(localStorage.getItem('education'));

than you can use NgForOf Directive to iterate over array as:

<ul id="elements">
    <li *ngFor="let elem of fetchdata">
        {{elem.title}} {{elem.description}}
    </li>
</ul>

answered Sep 1, 2017 at 9:10

Rici

362 bronze badges

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

8 Comments

user2828442 Over a year ago

perfect thanks, 1 thing, if i click on a name, how can i read its properties in the console, once i cana read it, i will then find a way to delete it

Rici Over a year ago

Bind click to <li> like: <li *ngFor="let elem of fetchdata" (click)="log(elem)"> where log is funcition inside component log(elem) { console.log("CLICKED: " + elem); }

user2828442 Over a year ago

in console i see CLICKED: [object Object]

Rici Over a year ago

that is because your element doesn't have toString() method in prototype, but when you put elem in separate log it will work ;) log(elem) { console.log("CLICKED"); console.log(elem); }

user2828442 Over a year ago

interesting it worked, my element doesnt have toString() method in prototype , what you tried to explain i am not clear on this, can you try to explain in a lehman language

|

Rahul Singh · Accepted Answer · 2017-09-01 09:00:28Z

2

Make use of *ngFor structural Directive to display a array of objects

<div *ngFor = "let title of fetchData">
  {{title.title}} -- {{title.description}} -- {{title.tagline}} {{title.date}}
</div>

Check out this link for the working example Link

answered Sep 1, 2017 at 9:00

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

3 Comments

user2828442 Over a year ago

Cannot find a differ supporting object '[{"title":"saurabh","description":"dd","tagline":"tt","date":"dd"}]' of type 'string'. NgFor only supports binding to Iterables such as Arrays

user2828442 Over a year ago

i have seen that but wndering what is wrong, even this.fetchdata = localStorage.getItem('education'); console.log(this.fetchdata); is showing correct result -

[{"title":"saurabh","description":"dd","tagline":"tt","date":"dd"},{"title":"gaurav","description":"dd","tagline":"tt","date":"dd"}]

then why this error is coming

Rahul Singh Over a year ago

it was down to you not parsing data which i overlooked

Collectives™ on Stack Overflow

How can i show locally stored array objects on html page in a list?

2 Answers 2

8 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related