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.
That’s great - many thanks.
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.
We already have add and remove cookies management in state manager. Why would you want it otherwise?
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.
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 
very strong component! Thank you so much! 
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.
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.
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.
Great - I’ll try that. Thanks.
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.)
Yes there is a special action for that : add unique item
Thanks George, but that’s not what I meant, unless I misunderstood you. I was already using ‘add unique’, which is very useful - only adding an item if it’s not already there.
I want to remove an item if it’s already there (and add it if it isn’t). I can do it as I mentioned - using two buttons or entering an expression manually. I just wondered if there was a recommended/better way.
Lets say you have a recordset and want to store the selected ids. You add a checkbox in the repeater, set the checked state when the value exists in the array (using the contains formatter). Then using the updated event of the checkbox to add or remove the value to/from the array.
This should in theory work and should look something like:
<input
id="checked"
type="checkbox"
dmx-bind:value="id"
dmx-checked="arr.contains(this.value)"
dmx-on:updated="this.checked ? arr.add(this.value) : arr.remove(this.value)"
>
It is late and I haven’t tested it, so go ahead and try it. There is a lot possible when you are creative. If it is not working or missing something, then ask here again and I will look for some solution tomorrow.
Thanks Patrick. I couldn’t get this to work. However, I tried using the same method as I used for a button - but with a checkbox - and it worked fine:
<button dmx-on:click="session1.data.myarray.contains(id)?arr1.remove(id):arr1.addUniq(id)">Button</button>
Using this approach with a checkbox is a useful option - thanks.
I don’t think the above method can be using the UI. That’s why I wondered if there was a recommended way. The only method I know using the UI is by using two buttons (optionally with hide/show). Anyway, it’s no problem - all of these methods work.
I tested it today, it is indeed not possible to do it all using the UI. I noticed that you can’t do expressions in the dynamic events and also noticed that some events were missing for the checkbox.
My previous checkbox code was indeed not working, here a working version for the people that are interested.
<input
type="checkbox"
name="input1"
dmx-bind:value="id"
dmx-bind:checked="arr1.items.contains(id)"
dmx-on:change="arr1.items.contains(id) ? arr1.remove(id) : arr1.addUniq(id)"
>
An easier way with the UI is indeed to use two buttons and using the contains formatter to show/hide the add/remove button.
<button dmx-hide="arr1.items.contains(id)" dmx-on:click="arr1.add(id)">Add</button>
<button dmx-show="arr1.items.contains(id)" dmx-on:click="arr1.remove(id)">Remove</button>
Thanks - no problem this time. This is a useful method for using checkboxes with arrays. However I’m having other problems which I’ve explained in another thread.
This has been improved in Wappler 5.2.1. Now there are two new dynamic events for the checkboxes - checked and unchecked, so you can run different actions depending on the checkbox status.