# Add/remove items to a list fetched from JSON

**URL:** <https://forums.fusetools.com/t/add-remove-items-to-a-list-fetched-from-json/5283>\
**Category:** How-to Discussions\
**Created:** [September 25, 2015, 9:41am UTC](https://forums.fusetools.com/t/add-remove-items-to-a-list-fetched-from-json/5283 "2015-09-25T09:41:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [September 25, 2015, 9:41am UTC](https://forums.fusetools.com/t/add-remove-items-to-a-list-fetched-from-json/5283/1 "2015-09-25T09:41:20Z")

</div>

I would like to add (or remove) an item to a list of items fetched from a JSON but i don’t know how to do it:

```auto
      var vUserplaces = Observable();

      function onLoginClick() {
        var data = FetchJson(API_GET_USER + vUsername.value);
        data.addSubscriber(function(e) {
            if (e.value)
            {
                if (e.value.result=="OK" && e.value.data && e.value.data.length>0) {
                    vUserid.value = e.value.data[0].id;
                    vUsername.value = e.value.data[0].username;
                    vUserplaces.value = FetchJson(API_GET_USER_PLACES + vUserid.value);
                    vPanelRootHandle.value = "PanelRootPageMain";
                    debug_log("UserId: " + vUserid.value);
                }
                else
                    debug_log("User not found: " + vUsername.value);
            }
        });
      }

            function addItem(){
        ?????
    }

```

the button and items:

```auto
<StackPanel Alignment="Top">
<Panel Height="7" />
<Text Value="{vUsername}" FontSize="30" TextAlignment="Center"/>
<Button Margin="0,0,0,0" Opacity="1" Clicked="{addItem}">
    <ButtonText Value="Add!"/>
</Button>
<Each Items="{vUserplaces.data}">
      <Panel ux:Class="HorizontalBar" Margin="46,10,0,10" Alignment="VerticalCenter">
        <Rectangle Height="1" Fill="#dcdee3" />
      </Panel>
      <Header Value="{place_name}" />
      <Article Value="{place_category}" />
      <HorizontalBar />
</Each>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [September 25, 2015, 9:44am UTC](https://forums.fusetools.com/t/add-remove-items-to-a-list-fetched-from-json/5283/2 "2015-09-25T09:44:59Z")

</div>

Hi!

Try using `fetch` instead : [https://developer.mozilla.org/en-US/docs/Web/API/Fetch\_API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)

`FetchJson` and `Fetch` are being deprecated from FuseJS in favor of the more standard `fetch`

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [September 25, 2015, 1:14pm UTC](https://forums.fusetools.com/t/add-remove-items-to-a-list-fetched-from-json/5283/3 "2015-09-25T13:14:31Z")

</div>

I have just changed to fetch but i’m not able to add new elements to the item list:

```auto
        var url = API_GET_USER + vUsername.value;
          debug_log("url: " + url);

        fetch(url, {
            method: 'get'
        }).then(function(response) {
            return response.json();
        }).then(function(res) {

            if (res.result=="OK" && res.data && res.data.length>0) {

                vUsername.value = res.data[0].username;

                url = API_GET_USER_PLACES + res.data[0].id;
                debug_log("url: " + url);
                fetch(url, {
                    method: 'get'
                }).then(function(response) {
                    return response.json();
                }).then(function(res) {
                    debug_log(JSON.stringify(res.data));
                    vUserplaces.value = res;
                    vPanelRootHandle.value = "PanelRootPageMain";    
                }).catch(function(err) {
                     debug_log("Error getUserPlaces: " + err);
                });        

            } else {
                debug_log("User not found: " + vUsername.value);
            }

        }).catch(function(err) {
             debug_log("Error onLoginClick: " + err);
        });

```

the item list:

```auto
<StackPanel Alignment="Top">
    <Panel Height="7" />
    <Text Value="{vUsername}" FontSize="30" TextAlignment="Center"/>
    <Button Margin="0,0,0,0" Opacity="1" Clicked="{addItem}">
        <ButtonText Value="Add!"/>
    </Button>
    <Each Items="{vUserplaces.data}">
          <Panel ux:Class="HorizontalBar" Margin="46,10,0,10" Alignment="VerticalCenter">
            <Rectangle Height="1" Fill="#dcdee3" />
          </Panel>
          <Header Value="{place_name}" />
          <Article Value="{place_category}" />
          <Button Margin="0,0,0,0" Opacity="1" Clicked="{showCity}">
            <ButtonText Value="{place_city}"/>
        </Button>
          <HorizontalBar />
    </Each>
</StackPanel>

```

and my doubt: how should the “addItem” button look like ?

```auto
    function addItem(){
        debug_log(JSON.stringify(vUserplaces.value.data));
        //returns the JSON
    }

```

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [September 25, 2015, 2:42pm UTC](https://forums.fusetools.com/t/add-remove-items-to-a-list-fetched-from-json/5283/4 "2015-09-25T14:42:06Z")

</div>

In this case, you’d probably have a second Observable that contains your list of place objects. Something like:

```auto
var places = Observable();

```

In this scenario, your “addItem” function might be something like:

```auto
function addItem() {
    vUserplaces.value.data.forEach(function(place) {
        places.add(place);
    });
}

```

The UI would then data bind to that Observable instead (given it’s been exposed by the module with the same name):

```auto
<Each Items="{places}">

```

Removing items then is just removing them from the “places” observable.