问题描述:

I have a site where you can look for print shops on a map and filter what services they offer. Example is here: www.pigments.io

Each print shop has some properties stored in an object.

 marker: {

processes: {

'digital': false,

'offset': false,

'silk': true,

'letterpress': false,

'engraving': false

},

finishings: {

'diecutting': true,

'lasercut': false,

'perforation': false,

'msg': false,

'softtouch': false,

},

products: {

'apparel': true,

'largeformat': false

}

}

The checkboxes return an object with the same structure, if the checkbox is checked the value is set to true. Now let's say if I want to only show silk screen shops if only silk screen has been checked under processes I could do something like this:

((marker.processes.silk == true && marker.processes.silk == formData.processes.silk) ||

The shop (marker) needs to be set to true with it's silk property & if the checkbox is checked it returns true. I'm using polymer, it filters over each marker object and evaluates the statement above. If it's true, it shows the marker. (I just realized I could have just done this:

((marker.processes.silk == true && formData.processes.silk == true))

Now of course I could do something like this.

((marker.processes.silk == true && formData.processes.silk == true) || (marker.processes.digital == true && formData.processes.digital== true))

and so on. That'll get ugly but it would theoretically work. But now if I introduce another field to be compared, say the finishings, I'm just getting completely lost here. Basically let's say I want to show only silk screen shops. Works as the code above. Now I only want to show the silk screen shops that do diecutting. I know how I could seperately look for only silk shops, or only diecutting shops. But now if I add those two, if diecutting is selected, this needs to exclude from the already filtered silk shops.

My brain is mushy, please help x_x. I've been trying to come up with the solution for this for over an hour, thoughts revolving in circles. I'm not even sure if this can be done with basic comparison operators anymore?

Also, I realize this approach is really ugly and inefficient.

/edit1:

I've just realized I should check underscore. Essentially if I'm not mistaken I just need to check if the print shop object's true values are the same as the checkbox object's values, right?

/edit2:

I think I need to get all the true properties from the marker object and compare them with the corresponding properties in the checkbox. If they are all true/identical, then the marker should be shown, right?

/edit3:

I nearly have it (I think if I was correct with assumption from edit2).

 var markerProcessKeys = lodash.keys(lodash.pick(marker.processes, lodash.identity));

var markerProcess = lodash.pick(marker.processes, lodash.identity);

// doesn't work

var filterProcess = lodash.pick(formData.processes, markerProcessKeys);

//var filterProcess = lodash.pick(formData.processes, 'digital','offset');

// This one works, manually selecting only the true ones.

//So what's left to do is get the key names of the true ones and then compare

//I don't have it working yet though... I need to do the manual one automatically with lodash. Suggestions?

// this won't work

var = lodash.pick(markerProcess, filterProcess);

console.log(lodash.isMatch(t1, t2));

/edit4:

Nope, that's the wrong approach :/

网友答案:

Start by building a function that will tell you if a given shop matches a set of requirements. Assuming you requirements object looks like

{
    processes: {
        'digital': true
    },
    finishings: {
        'diecutting': true
    }
}

your function could be written as nested _.every calls :

function matches(requirements, shop) {
    return _.every(requirements, function(properties, cat) {
        return _.every(properties, function(val, key) {
              // (!val) is there to ignore properties set to false
              return (!val) || shop.marker[cat][key];
        });
    });
}

You would then use _.filter to extract the desired shops:

var validshops = _.filter(shops, _.partial(matches, requirements));

And a demo http://jsfiddle.net/nikoshr/9eq6o96L/

相关阅读:
Top