Underscore.js数组过滤

Question

I've been pulling my hair out with this one - I have the following array, continuing an object - which contains a vouchers array (containing a possible infinite number of objects)

var retailer = [ { _id: 52000c,
    address: 'bla bla bla',
    email: 'test@emailaddress',
    img: 'http://bla.jpg',
    intro: ' hello',
    strapLine: 'goodbye',
    tel: '0000 0000000',
    title: 'YE OLDE SHOPPE',
    website: 'http://',
    vouchers: 
     [ { _id: 523d003,
         barcode: false,
         description: 'blah',
         endTime: '20 December 2013',
         hidden: true,
         redemptionCode: 'redemptionCode',
         smallPrint: 'blah.',
         startTime: 'Today',
         title: 'blahbla' },
       { _id: 523de3,
         barcode: false,
         description: 'blah',
         endTime: '20 December 2013',
         hidden: true,
         redemptionCode: 'redemptionCode',
         smallPrint: 'blah.',
         startTime: 'Today',
         title: 'blahbla' },
        { _id: 523dr,
         barcode: false,
         description: 'blah',
         endTime: '20 December 2013',
         hidden: false,
         redemptionCode: 'redemptionCode',
         smallPrint: 'blah.',
         startTime: 'Today',
         title: 'blahbla' } ] 
} ]  

Using underscore.js, I'm trying to filter out those voucher objects with a property of hidden (hidden == true) - so I end up with the following, so that I only end up with those vouchers which are visible (hidden == false)

var retailer = [ { _id: 52000c,
        address: 'bla bla bla',
        email: 'test@emailaddress',
        img: 'http://bla.jpg',
        intro: ' hello',
        strapLine: 'goodbye',
        tel: '0000 0000000',
        title: 'YE OLDE SHOPPE',
        website: 'http://',
        vouchers: 
         [{ _id: 523dr,
             barcode: false,
             description: 'blah',
             endTime: '20 December 2013',
             hidden: false,
             redemptionCode: 'redemptionCode',
             smallPrint: 'blah.',
             startTime: 'Today',
             title: 'blahbla' }] 
    } ]  

So using underscore js, I wrote the following based on a previous stack overflow thread ( Filtering array with underscore.js )

var visibleVouchers = _(retailer[0].vouchers).filter(function (x) { return !x.hidden;});

And this returns all the visible vouchers - however, I lose the retailer in the process. What would be the best way to do this? I've tried lots of different things - ie, trying to replace the old voucheers array with the new one - but it doesn't seem to work.

Thanks, Rob

Answer 1

Use _.map() on retailers, which is a one-to-one mapping. Inside the callback (each retailer item), filter out vouchers using _.filter() (or _.reject() , depending on your feeling).

var arrRetailers = _.map(retailers, function(retailer) {
  var item = _.extend({}, retailer);
  item.vouchers = _.filter(retailer.vouchers, function(voucher) {
    return !voucher.hidden;
  }) || []; //in case of there is no "visible" voucher
  return item;
});

This returns a new array and do not change your initial retailers array.

If you prefer _.reject() , your callback must be adapted accordingly:

_.reject(retailer.vouchers, function(voucher) {
    return voucher.hidden; //note there is no exclamation mark
}) || [];

Hope this helps!

Answer 2

I found a blog post http://www.untitleddesigns.com/2011/javascript-replace-array-contents/ which seems to answer my question - it does work, although I'm unfamiliar with prototypes - so don't quite know why its working.

var visibleVouchers = _(retailer[0].vouchers).filter(function (x) { return !x.hidden;});
retailer[0].vouchers.length = 0;
Array.prototype.push.apply(retailer[0].vouchers, visibleVouchers);