Using Keyed Array Items of Session Storage

have added a KEYED ARRAY to session storage:

image

when trying to use this Keyed Array to store values, getting this option:

have already looked at this: Adding Items to Session Storage Arrays
and this Working with Arrays

but neither have answers about using Keyed Array from Session Storage.

can you please guide on how this will work?

how we can add, replace, remove the key-value pairs on a Keyed Array which has been added to Session Storage.

2 Likes

Have you got his to work? I ask because I may have the solution.

Nope. No success.
Please share your solution…

Please see Using Session Storage Keyed Array

1 Like

Great tutorial… thanks @ben
But, if this is how Wappler intends for us to use this, it does not look like a very good UX.
@patrick can you please look at Ben’s tutorial and suggest.

1 Like

What exactly are you missing @nshkrsh?

Except just one on update event that @ben can also do through the UI instead of code - it all looks fine to me.

2 Likes

Sorry, it was past my afternoon nap time.

1 Like

@George Sorry for the late reply. This is the main point which I am concerned about. And from what I understand, this is THE code that makes session's keyed array work.

Also, another issue I have with this method is that Ben is using another Array and updating that in session. Can the same thing be done without using another Array, directly in the session, and using the UI picker?

1 Like

Did you figure this out @nshkrsh? Updating the session directly without the array in the middle?

A Session Variable is merely a container that holds a value for the duration of a session. This value can be singular or it can be in the form of an Array.

If you want to assign a single value to the Session Variable, then just assign the value as in
179.99

If you want the Session Variable to be an Array, then your value must be an array as in
["179.99","9.99"]

If you want the Session Variable to hold a Keyed Array, then the value will look like
[{"product":"Los Angeles","qty":"1","price":"179.99"},{"product":"Cotton T-Shirt","qty":"1","price":"9.99"}]

The above examples show static values and in the case of a simple value, you can assign a dynamic value like
{{price}}

If you want to assign an Array to the Session, then you could have something like
[{{price[0]}},{{price[1]}}] (not sure if this will work, so treat this as theoretical)

The problem with this is that every time there is an modification to the array, you must code to facilitate this. Wappler makes it very easy to handle Arrays (I will not elaborate on this here), including Keyed Arrays.

So to answer your query, unless you want to code the whole thing yourself, it is best to use Wappler’s Arrays to populate the Session Variable.

2 Likes

Thanks a lot ben. At this minute, I’m literally following every word of your how-to guide on using session storage keyed array. They are soo valuable, very kind of you.

But, I’m unable to make it work, either two things are possible - either i’m doing it wrong, or it could be a wappler bug. I have learnt it the hard way that there are lots of wappler bugs and if something doesn’t work, I open the code view and see if the generated code doesn’t make sense and fix it. But, everything looks good at my end, still not working.

I will share the error I’m hitting and test page under the how-to guide on this topic Using Session Storage Keyed Array shortly… thanks again for helping the community out.

Thank you for your kind words, exactly what this old codger needs to start the day :slightly_smiling_face:

Have a look at https://www.youtube.com/watch?v=zvu8evsEovg&list=PLUjqTJN3byC9sKH9EbikpTOli5OqdKwwS and see if there is anything that may help you.

1 Like

Hi Ben,

I made it work… yaayyy! Where I got stuck is between step 15 & step 16 in your how-to guide.

image image

To display the data, I was binding my repeat to “items” instead of “cart”. Thanks to your guide.

A small feedback, under the session “cart” object, probably rename “items” to something like “mycartitems” as it can be confused with the “items” keyword when binding with array components. Looks like we never refer to this “mycartitems” anywhere in the workflow, except may be when directly referring to the keyed arrays.

My next challenge to do the same for a complex keyed array like this :wink:

image

Just watched your updated youtube tutorials. Noticed that you have used “cartitems” instead of “items” and also how different the bindings are (arrCart now binds to cart/cartitems) compared to the previous tutorials. It’s more clear and easy understand, thanks @ben .

Any reason why you chose local storage instead of session storage?

Selfish. While creating the tutorial and while testing, I frequently had to shut the browser down and restart. Each time I would loose my session variables. With local storage, there was no such problem.

Thinking about it, local storage will enhance user experience if they came back to the browser after a day or so to find that their cart still exists.

1 Like

Hi @ben,

I’m quite familiar with your wCart tutorials using the Local Storage Manager (containing keyed array) & intermediary arrays to pass on and store the values into local storage manager.

I’m trying to understand how is this new Data Store Component different from Local Storage Manager?

I went through the tutorial for this new Data Store component (Creating a Shopping Cart with the Data Store Component) and this is my understanding, would be great if you could validate:

  • Data Store Component is an abstraction over the Local storage & Session storage manager

  • With the ability to insert, update, delete & clear data, the keyed array in your tutorial & intermediary arrays to pass on data are eliminated, making it damn simple to build similar functionality

  • Does this make the Local storage & Session storage components (under State Management) redundant, as it’s more efficient to use the data store?

1 Like

No, it does not. Data store provides you with the options to have your data stored in a structured way, by defining a schema just like a database. It allows you to access, edit, delete specific items.

Local storage and session storage are still the way to go when you want to save a single value in a variable and reuse it across your pages. Also to cache your server connect results etc.

1 Like

Thanks @Teodor.

Having gone through Ben’s awesome tutorial, I can truly appreciate the amazing ease the new Data Store component delivered. Kudos… thanks for the awesomeness :slight_smile: @George

2 Likes