CODEWITHSUNDEEP
angularangular-local-storage
vaibhav naik
vaibhav naik

Reputation: 169

How to render json data present in local storage to a html template

I have stored some data in localstorage i want to access it in the manner of interpolation inside html template but error occurs when i call it inside template.

  </code for calling localstorage inside a component.ts file
   ngOninit(){
   this.myResponse = JSON.parse(localStorage.getItem('fav'));
   console.log(this.myResponse)
   return this.myResponse;
   }
   />


  </code inside html template of the component file
   <div class="conatiner">
   <div class="row" *ngFor="let single of myResponse" >
   <p>{{single}}</p>
   </div>
   </div>
   />



     output of html component i am getting
     [Object Object]
     [Object Object]
     [Object Object]
     [Object Object]
     [Object Object]


   console output for component.ts ie console.log(myResponse)
  (6) [{…}, {…}, {…}, {…}, {…}, {…}]0: {ifsc: "ABHY0065001", bank_id: 60, 
   branch: "RTGS-HO", address: "ABHYUDAYA BANK BLDG., B.NO.71, NEHRU 
   NAGAR, KURLA (E), MUMBAI-400024", city: "MUMBAI", …}
    ............}

Upvotes: 0

Views: 234

Answers (1)

Sneha Pawar
Sneha Pawar

Reputation: 1127

@vaibhav you are printing the object there, if you want to access the properties of that object replace your HTML code as below:

<div class="conatiner">
     <div class="row" *ngFor="let single of myResponse" >
        <p>{{single.ifsc}}</p> 
      </div>

OR if you want to show the whole object then use json pipe 

{{single | json}}

Upvotes: 1

Related Questions