What is the best way to display values from a Localstorage array in a tabular format using a looping structure

Question

What is the best way to display values from a Localstorage array in a tabular format using a looping structure

I have set up a local storage key 'fsubs' to store form submissions as an array. Here is how I am doing it:

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));

The challenge now is that I need to display these values in a tabular format like this using a loop, but I'm not sure how to achieve this.

Barcode | Reelno
122121 | 232323

P.S.: I want to implement this in my Angular component using TypeScript.

javascript angular typescript local-storage angular-local-storage

Answer 1

Answer №1

Here is a code snippet to achieve the desired result:

In your component file (component.ts):

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

In your template file:

<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>

Answer 2

Here is a code snippet to achieve the desired result:

In your component file (component.ts):

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

In your template file:

<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>

What is the best way to display values from a Localstorage array in a tabular format using a looping structure

Answer №1

Similar questions

Ways to break down a collection of multiple arrays

The selected check icon does not appear in the console log

Tips for extracting a value from a geojson response using a specific key

Trouble obtaining AJAX result using onClick event

Issue with Slick Grid not updating after Ajax request

Determining the minimum and maximum values of a grid using props in a React component

What approach do you recommend for creating unique CSS or SCSS styles for the same component?

Book of Tales displaying Emotion Styling upon initial load only

Validating Two DateTime Pickers as a Group with Javascript in asp.net

The error states that the type '() => string | JSX.Element' cannot be assigned to the type 'FC<{}>'

Issue: Incompatibility in metadata versions detected for module .../ngx-masonry/ngx-masonry.d.ts. Level 4 version identified, whereas level 3 version

Executing a JavaScript function within MainPage.xaml.cs codebehind file in a Windows application

Error in sending Ajax form

Issue: jQuery Datatable not functioning properly while attempting to populate the table through JavaScript.Explanation: The

Using TypeScript generics to constrain to either a number or a string

It seems that the JavaScript object is producing varied values in distinct locations despite no alterations made in between

Guide to retrieving objects in React.js

Revamp the switch-case statement in JavaScript code

The progress indicator for AJAX file uploads is malfunctioning; the addEventListener('progress') method is not functioning as intended

What is the process of sending a file from a remote URL as a GET response in a Node.js Express application?