Using "where" as a filter

How-to Discussions
1

I think this is the intent of this method but I’m struggling to get it to work.

I have a method to change selectedFilterLabel based on a selection, but when I change it, the condition in the where doesn’t trigger it to run again. Accoring to the documentation, it should process the where again if the condition contains an Observable. In this example, selectedFilterLabel is an Observable.

Initially, I’m filtering to only seeing items with a food category, and that works. Then when I change it to coffee, it’s not updating. Is there a different way I should be triggering it?

JS:

function Card(title, categories) {
    this.title = title;
    this.categories = categories;
}

var cardList = Observable(
    new Card("Test 1", Observable("food", "coffee")),
    new Card("Test 2", Observable("coffee", "other"))
);

var selectedFilterLabel = Observable("food");

var filteredCardList = cardList.where(function(e) {    return e.categories.contains(selectedFilterLabel.value);
});

function filterView(args) {
    selectedFilterLabel.value = args.data.filterLabel;
}

UX:

<StackPanel>
    <Each Items="{filteredCardList}">
        <Card />
    </Each>
</StackPanel>

<Each Items="{filterList}">
    <StackPanel>
        <Clicked Handler="{filterView}" />

        <Text Value="{filterLabel}" />
    </StackPanel>
</Each>
2

I misread slightly, it said in the documentation if the condition “returns” an Observable, then the where will watch the condition too.

In my case, I’m not sure then how to trigger this… and filter seems to be only for simple arrays.

Thoughts?

3

I have the same case. Hope someone can have a good solution.

4

Hi guys. I did some testing, and came up with an example for you:

<App Theme="Basic">
    <DockPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var items = Observable(1,2,3,4,5,6,7,8,9,10,11);

            var filter = Observable("gt");

            itemsView = items.where(function(x){ return Observable(function(){
                console.log("X: " + x + ", fltr: " + filter.value);
                if (filter.value === "lt")
                    return x < 5;
                else if (filter.value === "gt")
                    return x > 5;
                else if (filter.value === "eq")
                    return x === 5;
                return false;});
            });

            function setFilterLT(){ filter.value = "lt";}
            function setFilterGT(){ filter.value = "gt";}
            function setFilterEQ(){ filter.value = "eq";}

            module.exports = {
                items: itemsView,
                setFilterLT:setFilterLT,
                setFilterGT:setFilterGT,
                setFilterEQ:setFilterEQ
            };
        </JavaScript>
        <Grid Dock="Top" ColumnCount="3">
            <Button Clicked="{setFilterLT}" Text="&lt;5"/>
            <Button Clicked="{setFilterEQ}" Text="=5"/>
            <Button Clicked="{setFilterGT}" Text=">5"/>
        </Grid>
        <StackPanel>
            <Each Items="{items}">
                <Panel Background="#ddd" Margin="2" Height="40">
                    <Text Value="{}" />
                </Panel>
            </Each>
        </StackPanel>
    </DockPanel>
</App>

It is a bit verbose, but i think you can see how to make Observable.where react properly.

Notice that we are returning an Observable in the .where function.

5

Yes, this is exactly what I was looking for! I just needed to wrap my entire condition method in an Observable. Works like a charm! Thank you!

6

It works.

But I found a strange things. I have a strings array in my original Observable. And I use the user’s key in string to filter this array. The view list items will change and narrow while the use key in. But I found that if I keys in the backspace, the filter arrange will expand. but the items display order will change not like the original one. The items that fit the previous search value display on the top.

7

Hey guys I was trying to adapt this code to change the language with an api fetch. How do I reload the content once I have changed the language?

I got this so far:

<App Theme="Basic">
    <DockPanel>
      <JavaScript>
        var Observable = require("FuseJS/Observable");
        var news = Observable();
        var errorMessage = Observable("");

        var language = Observable("en");
        var apiUrl = 'https...' + language.value;

        fetch(apiUrl, { 
            headers: {'Authorization': auth}
        })
            .then(function(result) {
                result.json().then(function(data) {
                    for (var i = 0; i <50; i++) {
                        var item = data[i];
                        news.add(item);
                    }
                });
            });

        function setLanguageEN(){ language.value = "en";}
        function setLanguageES(){ language.value = "es";}
        function setLanguagePT(){ language.value = "pt";}

        module.exports = {
            news: news,
            setLanguageEN:setLanguageEN,
            setLanguageES:setLanguageES,
            setLanguagePT:setLanguagePT,
        };

      </JavaScript>

      <Grid Dock="Top" ColumnCount="3">
          <Button Clicked="{setLanguageEN}" Text="EN"/>
          <Button Clicked="{setLanguageES}" Text="ES"/>
          <Button Clicked="{setLanguagePS}" Text="PT"/>
      </Grid>

      <ScrollView>
          <Each Items="{news}">
              //parse the JSON here...
          </Each>
      </ScrollView>

    </DockPanel>
</App>
8

Helder: If you want to re-execute the fetch when you change the language, you have to subscribe to the language observable, and do your thing there.

function fetchData() {
    news.clear();
    fetch(apiUrl ...).then(...
}

fetchData(); // initial fetch

language.addSubscriber(fetchData);  // re-fetch
9

Thanks Anders, this works like a charm.