Adding Items to Session Storage Arrays

[fatherofinvention]

Hey Wappler team

I am trying to add items into an array I’ve created in Session Storage using the Dynamic Events on a button:

But instead of adding items to it each time the button is clicked, it overwrites the existing item. I’m not surprised since this is what “Set Value” seems like it would do. Does that mean we need an “Add Item” action for arrays in Wappler?

Instead, I need to add items to the array in the traditional sense. So that I may be go back reference them individually later on. Can you tell me what am I doing wrong? Thank you!

[TomD]

As far as I know, Wappler is currently lacking some features to manipulate arrays - at last I haven’t found them yet. However, there is a method I’ve used for cookies. I think the same will apply to sessions.

Eg if you want to gather a list of ids by clicking buttons - eg to use in a query - you can do this by putting the ids into a string and creating an array later. I’m using the ‘|’ character as a delimiter.

Your + button could be:
cookies1.set('idlist',(cookies1.data.idlist + "|" + id + "|").replace("||", "|"),{})

Your - button:
cookies1.set('idlist',cookies1.data.idlist.replace("|" + id + "|", "|").replace("||", "|"),{})

For the query:
{{$_COOKIE.idlist.split("|")}}

I use two buttons and make them show/hide conditionally (so there appears to be a single button with a + or - ).

There may well be a neater/more sensible way to do this, and it may be not be a solution for your case anyway. Hopefully some more formatter options will be added at some point.

[fatherofinvention]

Hi @TomD that is an interesting approach, thanks for the idea. I’ll give it a shot. The tip on conditionally showing the buttons is cool too and makes for a cleaner UI.

I am curious as to why we are able to create arrays and keyed arrays if we don’t have any way of working with them and am very interested in what @Teodor and @George have to say. Working with arrays, hash tables, etc, is fundamental in any programming language so if it isn’t available today, I hope it will be eventually!

[fatherofinvention]

@Teodor could you comment on this when you get a free moment please?

[George]

Indeed we can’t manipulate arrays yet, just filter them with data formatters.

But why do you want to append in your case?

Maybe @patrick can advise

[patrick]

There is currently no way to insert/delete items in arrays. But I have created a small component that should do the trick.

dmx.Component('array', {
  attributes: {
    items: {
      type: Array,
      default: []
    }
  },

  methods: {
    add: function(item) {
      this.data.items.push(item);
      dmx.requestUpdate();
    },

    remove: function(index) {
      if (index == null) {
        this.data.items.pop();
      } else {
        this.data.items.splice(index, 1);
      }
      dmx.requestUpdate();
    }
  },

  render: function() {
    this.set('items', this.props.items);
  },

  update: function(props) {
    if (JSON.stringify(props.items) != JSON.stringify(this.props.items)) {
      this.set('items', this.props.items);
    }
  }
});

In the HTML you use it like (I also added the session manager)

<dmx-session-manager id="session1"></dmx-session-manager>
<dmx-array id="arr1" dmx-bind:items="session1.data.items"></dmx-array>

<button dmx-on:click="arr1.add(arr1.items.length);session1.set('items', arr1.items)">ADD</button>
<button dmx-on:click="arr1.remove();session1.set('items', arr1.items)">REMOVE</button>

The remove method also accepts an index to remove any item in the array, when no parameter is given it will remove the last item.

[TomD]

Thanks @patrick, I think this will be really useful - althought I’ve only half got it to work.

I can add dynamic IDs to the array using arr1.add(id), but how can I remove items from the array? It seems it will only work with an index.

Edit: items can be removed, but not necessarily the correct ones. Is there a way to work out the position/index of an item to use for the remove parameter?

Also, will this component work witih cookies too?

[patrick]

You can change the remove method to

remove: function(item) {
  var index = this.data.items.indexOf(item)
  if (index != -1) {
    this.data.items.splice(index, 1);
  }
  dmx.requestUpdate();
}

You can do anything with the array you want, you can store it in a session, cookie or use it as a filter.

[TomD]

That’s great - many thanks.

[TomD]

This works fine with sessions and local storage, but I can’t get it to work with cookies. Clicking a button to add an item to the array gives this message:
TypeError: "this.data.items.push is not a function"

If it should work equally with cookies and session, I must have done something wrong - but I can’t see what.

[George]

We already have add and remove cookies management in state manager. Why would you want it otherwise?

[TomD]

To use in the same way as the new feature Patrick has provided to add/remove items to/from arrays - but with cookies as well as sessions.

In my reply above (second reply in this thread), I explain how I use a string with delimiters to get round the fact that there are no features to manage arrays. This is a rather awkward workaround. I was hoping I could use the new feature to avoid this.

[Teodor]

We added new Arrays Component in Wappler 1.9.5
Please check the docs: Working with Arrays
You can store your arrays in local storage/cookie/sessions using its dynamic events and the state manager

[Freddy_Blockchain]

very strong component! Thank you so much!

[fatherofinvention]

@Teodor

Yep, this is one of the many reasons Wappler is so great, the team is quick to respond to community feedback. Thank you sir! Very cool enhancement.

[TomD]

I went through your tutorial without any problem. It was all very clear. However, I’m probably missing something obvious, but how do I use the new array feature with cookies and sessions etc.?

I’m currently using the array component which Patrick provided the code for recently. This is working very well for sessions and local storage (although I haven’t got it to work with cookies). I assumed the new component would be based on this. I’ve tried adding the State Management component to add a cookie or a session, but don’t know how this relates to the array component. I would be grateful for any advice.

[Teodor]

Use the onupdated dynamic event of the Array Component to store your array items in the session.
This way you can transfer this to other pages, where you want to use them as dynamic values for array component.

[TomD]

Great - I’ll try that. Thanks.

[TomD]

That all makes sense and works really well.

Is there a recommended way to great a toggle - eg a button which will add a value to an array if it’s not already contained in the array and remove it if it is? It can be done with two buttons - one to add, one to delete - using show/hide conditions to show the relevant button. Or it can be done with a single button, using an expression with a ternary operator; this seems a little neater, but can’t be done using the UI. Is there a better way?

(I can’t remember if it’s been requested already, but I can see that being able to use conditions within dynamic events might be increasingly useful.)

[George]

Yes there is a special action for that : add unique item