using variables in underscore.js _.where

Question

is it possible to use variables with .where in _.js?

I am making a filtering system that gets an array of objects and filters out the selected objects on click. However, the objects to be filtered are different based on the elements chosen, so I would like to use _.js to filter variables passed to it with _.where

Hardcoded values work perfectly, but when replaced with replica variables, it shoots out a blank array.

var user_filters = user_array;
var filtered_text;
$('.allFilters li').click(function () {
    var $this = $(this); 
    var selected_filter = $this.siblings('a').text();
    selected_filter = selected_filter.toLowerCase();
    var filters = $this.attr('data-filter-value');
    filters = '"'+filters+'"';
    selected_filter = selected_filter;
    console.log(selected_filter, filters);
    user_filters = _.where(user_filters, {selected_filter: filters});
    console.log (user_filters);
});

I think you don't need filters = '"'+filters+'"';. Additional can you create a JSFiddle? — Satpal
– Satpal, Commented Jan 7, 2014 at 7:35
I agree with @Satpal. That line of code is adding literal quotes to the value of filters, and might be causing trouble. I doubt this method is not working because you're using variables. — Mark
– Mark, Commented Jan 7, 2014 at 7:44
I am working on the fiddle now, but if I remove {selected_filter: filters} and replace it with, say, {test: "1"} it works perfectly. I have tried removing the quotes as well from the variable. Still a null unfortunately. — Dreamlines
– Dreamlines, Commented Jan 7, 2014 at 7:48
Sorry for the delay, it took me a bit to think about how to present this in a very simplistic manner. Here is the fiddle: jsfiddle.net/3u6LX — Dreamlines
– Dreamlines, Commented Jan 7, 2014 at 8:26
@Dreamlines with your fiddle, try and think about how the JS interpreter would know that test is a literal, but selected isn't. The notation is exactly the same. If you're going to say because selected is a variable, how would you then be able to use the literal string selected as a key? — robertklep
– robertklep, Commented Jan 7, 2014 at 9:07

Gruff Bunny · Accepted Answer · 2014-01-07 15:18:18Z

2

There is a way to use variables when calling where, which is to create an object literal which where expects. This can be done using the underscore function _.object which can take either an array of keys and an array of values or an array of key value pairs.

In your example you could have done:

user_filters = _.where(user_filters, _.object([[selectedFilter, filters]]));

answered Jan 7, 2014 at 15:18

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gruff Bunny Over a year ago

Wasn't 100% sure from the question whether there could be more than one selectedFilter and filters. The proposed solution assumes one but could be easily converted to work with many.

robertklep · Accepted Answer · 2014-01-07 08:07:49Z

0

I think you're looking for something like this:

user_filters = user_filters.filter(function(item) {
  return item[selected_filter] === filters;
});

(and leave out the filters = '"'+filters+'"'; line)

Or, using Underscore's filter:

user_filters = _.filter(user_filters, function(item) {
  return item[selected_filter] === filters;
});

answered Jan 7, 2014 at 8:07

robertklep

205k38 gold badges421 silver badges413 bronze badges

3 Comments

Dreamlines Over a year ago

This did the trick, but still leaves me wondering about what was going wrong with the original method. edited to say Thanks so much!

robertklep Over a year ago

@Dreamlines you cannot create a 'dynamic' object literal, where the 'key' part (the part before the :) is based on a variable (which is basically what you're trying to do). You have to use a more elaborate way: var obj = {}; obj[variable] = value;.

Dreamlines Over a year ago

This makes perfect sense! Thank you so much for the great explanation and taking the time to write it out!

Laiacy · Accepted Answer · 2017-09-09 10:42:06Z

0

Variables can be used if surrounded them by square brackets:

In your case you can do this:

var selected_filter = $this.siblings('a').text();
    selected_filter = selected_filter.toLowerCase();

_.where(user_filters, {[selected_filter]: filters});

edited Sep 9, 2017 at 10:42

answered Sep 8, 2017 at 12:31

Laiacy

1,6281 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

using variables in underscore.js _.where

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related