finding by object key in underscore.js

Question

I have the following object

{ join: {} }

I'd like to find it's default object from the array below

[
    { login: { label: 'Login', url: '#login' } },
    { join: { label: 'Join', url: '#join', theme: 'a' } },
    { home: { label: 'none', icon: 'home', url: '#', theme: 'a' } }
]

I'd like to loop through the array and match the key, in this case 'join'.

This is what I have so far:

 var butt_to_find = { join: {} }
 var all_buttons = 'array above'
 var matching = _.find(all_buttons, function(default_button){
 return if default_butt key @ 1 is the same as butt_to_find key @ 1;
  });

This is the first time I've used underscore after hearing so much about it. Any help, more than welcome

One minor (off-topic) point: You're using label: 'none'. Surely label: null (or omitting the label property) would more be a more accurate way to represent this? As written, I'd expect the word "none" to actually be rendered in the UI. — davidchambers
– davidchambers, Commented Nov 24, 2011 at 6:33

davidchambers · Accepted Answer · 2011-11-24 06:37:44Z

20

var buttons = [
  { login: { label: 'Login', url: '#login' } },
  { join: { label: 'Join', url: '#join', theme: 'a' } },
  { home: { label: 'none', icon: 'home', url: '#', theme: 'a' } }
]

_.find(buttons, function (button) { return 'join' in button })

The problem is that you're using a suboptimal data structure. This would make more sense, and produce simpler code:

var buttons = {
  login: {label: 'Login', url: '#login'},
  join: {label: 'Join', url: '#join', theme: 'a'},
  home: {label: 'none', icon: 'home', url: '#', theme: 'a'}
}

buttons.join // equivalent to the `_.find` line in the first example (but much simpler)

Perhaps you're using an array because the order of the buttons is important. In this case, I'd use an array of arrays:

var buttons = [
  ['login', {label: 'Login', url: '#login'}],
  ['join', {label: 'Join', url: '#join', theme: 'a'}],
  ['home', {label: 'none', icon: 'home', url: '#', theme: 'a'}]
]

_.find(buttons, function (button) { return button[0] === 'join' })

edited Nov 24, 2011 at 6:37

answered Nov 24, 2011 at 6:30

davidchambers

25.1k18 gold badges81 silver badges110 bronze badges

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

2 Comments

Chin Over a year ago

Thanks for the pointers - got me thinking about the data structure which really helped.

webnesto Over a year ago

FWIW (and a little off topic) but I wouldn't use an array of arrays to retain order. Use an array of keys for order and keept the buttons object as-is. var buttons = {...}; var buttonsOrder = [ 'login','join','home']; That way you only have to iterate arrays when you need order, and can do immediate lookups when you need the item.

ruakh · Accepted Answer · 2011-11-24 06:06:47Z

4

var matching =
( _.find
  ( all_buttons,
    function (button)
    { return _.keys(butt_to_find)[0] in button;
    }
  )
);

where _.keys(butt_to_find) evaluates to ['join'] (an array containing the keys of butt_to_find), _.keys(butt_to_find)[0] evaluates to 'join' (the first element of said array), and _.keys(butt_to_find)[0] in button evaluates to either true or false, depending whether button contains 'join' as a key. (The in operator is a regular JavaScript operator, not something added by underscore.js.)

answered Nov 24, 2011 at 6:06

ruakh

185k29 gold badges292 silver badges324 bronze badges

Comments

Shanimal · Accepted Answer · 2012-09-05 20:01:41Z

1

var def = {join: {}}
var defs = [
    { login: { label: 'Login', url: '#login' } },
    { join: { label: 'Join', url: '#join', theme: 'a' } },
    { home: { label: 'none', icon: 'home', url: '#', theme: 'a' } }
]
_.find(defs,function(item,key){
    return _.has(item,_.keys(def)[0])
})

You can also switch to the lodash library (a drop in version of underscore) and do this

_.compact(_.pluck(defs,_.keys(def)[0]))

edited Sep 5, 2012 at 20:01

answered Sep 5, 2012 at 19:07

Shanimal

11.8k7 gold badges67 silver badges82 bronze badges

Collectives™ on Stack Overflow

finding by object key in underscore.js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related