Add/remove items to a list fetched from JSON

How-to Discussions
1

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:

      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:

<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>
2

Hi!

Try using fetch instead : 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

3

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

        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:

<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 ?

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

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

var places = Observable();

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

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):

<Each Items="{places}">

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