[SOLVED] How to print Localstorage array values in tabular form using a loop?

How to print Localstorage array values in tabular form using a loop?

i am storing form submissions in localstorage key as an array 'fsubs' like this:

var fsubs = JSON.parse(localStorage.getItem('fsubs') || "[]");
var fcodes = {"barcodeno" : this.form.value.barcode, "reelno" : this.form.value.reelno, "width" : this.form.value.width, "dia" : this.form.value.dia, "weight" : this.form.value.weight};
fsubs.push(fcodes);
localStorage.setItem('fsubs', JSON.stringify(fsubs));

Now the problem is that I have to print this values in a tabular form like this using a loop maybe but i dont know how to do it.

Barcode | Reelno
122121 | 232323

P.S.: I want to print this in my component using typescript in Angular

Solution

Try like this:

component.ts:

fsubList:Array<any> = JSON.parse(localStorage.getItem('fsubs'));

template:

<table>
   <tr>
    <th>Barcode</th>
    <th>Reelno</th>
  </tr>
  <tr *ngFor="let item of fsubList">
    <td>{{item.barcodeno}}</td>
    <td>{{item.reelno}}</td>
  </tr>
</table>