How to iterate through an array stored in Local Storage JavaScript?

Question

In this application I am getting this information from users in an HTML form: var orderName, trackingNumber, price the user is updating these dynamically. Then I'm storing them in an array, converting it to json format, and keeping the orderName variable (which the user gave earlier) as the local storage key,

    var myArray = [];
    myArray.push(orderName, trackingNumber,price);

    var JsonOrder = JSON.stringify(myArray );
    localStorage.setItem(orderName,JsonOrder );

Now I want to display all the orders and their information. One page with all the orders listed, and the orderName should be a HYPERLINK that takes user to a page with information on just that order.

Here is what I'm doing to loop through the array:

 var savedOrders = JSON.parse(localStorage.getItem('orderName'));
 var orderName;
 var trackingNumber;
 var price;


 for (var key in savedOrders ) {

  orderName  = savedOrders[key][0];
  trackingNumber = savedOrders[key][1];
  price = savedOrders[key][2];


 }

This isn't working?

`.0` isn't valid syntax. You need to use the bracket notation `[0]` instead. — Patrick Roberts, Apr 12 '20 at 02:06
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of — QuentinUK, Apr 12 '20 at 02:32
Does this answer your question? [Loop through an array in JavaScript](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — Dan O, Apr 12 '20 at 03:50
there are many, many, many questions on Stack Overflow regarding how to iterate over an array in Javascript. which of them did you try and why did they not solve your specific problem? — Dan O, Apr 12 '20 at 03:51
My solution for iterating through an array saved in local storage is not working hence the purpose of asking and posting code — ckaepie, Apr 12 '20 at 04:05
for example doing savedOrders[key][1] gives me : eeundefinede instead of the actual array value that is stored in that key of the local storage — ckaepie, Apr 12 '20 at 04:14
My question wasn't "does your code work?". it obviously doesn't or else we wouldn't be here. My question was "once you noticed that your code didn't work, what research did you do and what is different about your particular problem such that zero existing Stack Overflow results could solve it?". — Dan O, Apr 12 '20 at 04:33
My main problem is that iterating through the loop only returns the array keyname that is stored. I haven't found a solution here for retrieving the array values within each key.Most of the local storage questions here are just for keynames haven't found one for a question of my nature that works. — ckaepie, Apr 12 '20 at 04:42

Mister Jojo · Answer 1 · 2020-04-12T03:47:18.040

0

simply do


let JsonOrder = JSON.stringify( [orderName, trackingNumber, price] );
localStorage.setItem('someName',JsonOrder );

//---
let orderName, trackingNumber, price;
[orderName, trackingNumber, price] = JSON.parse(localStorage.getItem('someName'));

edited Apr 12 '20 at 03:47

answered Apr 12 '20 at 02:14

Mister Jojo

20,093
6
21
40

Can you please explain me the logic of how this would work? – ckaepie Apr 12 '20 at 03:39
@ckaepie the Destructuring assignment ? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment – Mister Jojo Apr 12 '20 at 03:43
I meant the line ```let JsonOrder = JSON.stringify( [orderName, trackingNumber, price] );``` this is an array right don't I need to declare it before? – ckaepie Apr 12 '20 at 04:10
@ckaepie it create a temporary array inside the JSON.stringify method, it's the same way when you use a compute (or whatever) as argument for any function, like `myFunct( X + 7 );` ... – Mister Jojo Apr 12 '20 at 13:22

score 0 · Answer 2 · answered Apr 12 '20 at 06:13

I found an answer here:


// Get the existing data
var existing = localStorage.getItem('myFavoriteSandwich');

// If no existing data, create an array
// Otherwise, convert the localStorage string to an array
existing = existing ? existing.split(',') : [];

// Add new data to localStorage Array
existing.push('tuna');

// Save back to localStorage
localStorage.setItem('myFavoriteSandwich', existing.toString());

from https://gomakethings.com/how-to-update-localstorage-with-vanilla-javascript/

I think there is a better way then to use split since what if the user enters a [] or , as their input?But so far this works just not a good method.

How to iterate through an array stored in Local Storage JavaScript?

2 Answers2