update array from buttons

Community Help
1

How to update or reset a array from input buttons ?

viewof counter = Inputs.button([
  ["Increment", value => value + 1],
  ["Decrement", value => value - 1],
  ["Reset", value => 0]
], {value: 0, label: "Counter"})

Update value of the button.
But how to update an array (add item with a variable value or reset the array)?

viewof a = Inputs.button(
  [
    ["Add", (value) => value.push("foo")],
    ["Reset", (value) => []]
  ],
  { value: [], label: "An array" }
)

“foo” will be variable.
My underlying purpose is to capture like a basket different state of variables that will change from user actions.

3

This snippet seems to do what I want.

viewof a = Inputs.button(
  [
    ["Add", () => mutable foo = foo.concat("aaa"),
    ["Reset", () => mutable foo = []]
  ],
  { value: [], label: "An array" }
)

Is it correct ?

4

Hello, Were you able to get this to work?

5

In a way.
Mutable cannot be embedded.
I would have like to find a way to export the values. A kind of deep copy.

My purpose is to offer a sort a shopping cart (add item, remove one, reset)
then embed the values that the user has collected.

Play with the WMS Leaflet map GCA (DEV) / Patrick Brockmann / Observable
with ‘Add, …’, mapsArray always stays at it initial values (ie empty array []).

6

I have sent you a more detailed suggestion

let me know if you have questions?

1 Like
7

That indeed clearer.

8

The time sliders are probably missing because you haven’t fixed the “export” button’s base URL to your notebook: it’s still pointing to my fork.

htl.html`<button onClick="javascript:window.open('https://observablehq.com/embed/983ed0edc556f69f?cells=mapsArray%2Callmaps${addHash(
  mapsArray
)}', '_blank');">Export all maps</button>`

here you need to replace 983ed0edc556f69f with @pbrockmann/wms-leaflet-gca-dev.

1 Like
9

Yes… Sorry
Of course !