How to add filter result to select menu

I'm stuck with my first dashboard project with d3, dc and crossfilter. Cannot find a solution.

"ETCBTC","BUY","0.002325","1.04","0.00241800","0.00104","ETC"
"ETCBTC","SELL","0.002358","1.04","0.00245232","0.00000245","BTC"
"LTCETH","SELL","0.30239","0.006","0.00181434","0.00000181","ETH"
"LTCETH","SELL","0.30239","0.149","0.04505611","0.00004506","ETH"

I have different trading pairs in first column and from it i need to use only last pair BTC and ETH in this example.

I found the filter that helps me to do that.

The thing is I need to have BTC and ETH in my select menu which can apply filter.

function show_market_selector(ndx) {
    var marketDim = ndx.dimension(dc.pluck("Market"));
    var selectorMenu = marketDim.group();

    function filterItems(query) {
        return ndx.dimension(dc.pluck("Market")).filter(function(el) {
            return el.toLowerCase().indexOf(query.toLowerCase()) > 0;

        });
    }
    filterItems("BTC");
    var select = dc.selectMenu("#market-selector")
                    .dimension(marketDim)
                    .group(selectorMenu);

    select.title(function (d){
        return "BTC";
    });

}

Now I get all pair in group in this menu. But my target is just to have BTC and ETH in the select menu.

I hope someone can give me advice. Thank you.

Solution

I think it would be easier just to use the currency as your dimension key:

var currencyDim = ndx.dimension(d => d.Market.slice(3)),
    currencyGroup = marketDim.group();
var select = dc.selectMenu("#market-selector")
                .dimension(currencyDim)
                .group(currencyGroup);

You don't really want to create a new dimension every time filterItems is called - dimensions are heavy-weight indices which are intended to be kept around.

The name of dimension.filter() is confusing - it's nothing like JavaScript's Array.prototype.filter(), which returns the matching rows. Instead, it's an imperative function which sets the current filter for that dimension (and changes what all the other dimensions see).

If you need a "from currency" dimension, that would be

var fromCurrencyDim = ndx.dimension(d => d.Market.slice(0,3))