# update array from buttons

**URL:** <https://talk.observablehq.com/t/update-array-from-buttons/6136>\
**Category:** Help\
**Created:** [January 27, 2022, 2:26pm UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136 "2022-01-27T14:26:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 27, 2022, 2:26pm UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/1 "2022-01-27T14:26:50Z")

</div>

How to update or reset a array from input buttons ?

```auto
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)?

```auto
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.

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [January 27, 2022, 5:00pm UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/3 "2022-01-27T17:00:34Z")

</div>

This snippet seems to do what I want.

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

```

Is it correct ?

---

<div class="post-metadata">

**Author:** ![Ananya](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@Ananya](https://talk.observablehq.com/u/Ananya)\
**Post date:** [February 3, 2022, 8:39pm UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/4 "2022-02-03T20:39:20Z")

</div>

Hello, Were you able to get this to work?

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [February 3, 2022, 9:15pm UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/5 "2022-02-03T21:15:48Z")

</div>

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](https://observablehq.com/@pbrockmann/wms-leaflet-gca-dev)  
with ‘Add, …’, mapsArray always stays at it initial values (ie empty array []).

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [February 4, 2022, 6:31pm UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/6 "2022-02-04T18:31:17Z")

</div>

I have sent you a more detailed suggestion

> **[WMS Leaflet map GCA (DEV)](https://observablehq.com/@observablehq/wms-leaflet-map-gca-dev-user-support)**
>
> An interface to produce a slippy map using WMS (Web Map Service) An interface to produce a slippy map using WMS (Web Map Service) layer from netCDF files available
> from :...

let me know if you have questions?

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [February 9, 2022, 10:50pm UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/7 "2022-02-09T22:50:51Z")

</div>

That indeed clearer.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [February 10, 2022, 9:56am UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/8 "2022-02-10T09:56:20Z")

</div>

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.

```auto
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`.

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [February 10, 2022, 11:07am UTC](https://talk.observablehq.com/t/update-array-from-buttons/6136/9 "2022-02-10T11:07:41Z")

</div>

Yes… Sorry  
Of course !