筛选对象

Question

I'm hoping someone will point me in the right direction or give me an example. I'm trying to filter through this multidimensional json object using a form with four filter options (see below).

After the user makes their selections and hits the submit button the results of that product or service's details are displayed on the page (ie...link to that product, content of that product), there can also be more than one product or service to display based on the search filter. Can someone please help me out?

Here is my object:

var data = {
        "Product":{"url":["http://www.google.com"],"mode":["gyro"],"modeOptions":["drop-controlled-descent","seated-wireline-steering","slickline-memory","surface-readout-ms","wireline-orientation"],"diameter":{"usa":"1.75","intl":"44.5mm"},"accuracy":{"usa":"0.5 deg","intl":"0.5 deg"},"temp":{"usa":"400F","intl":"204C"},"speed":{"usa":"250 ft\/min","intl":"76.2m\/min"}},
        "Service":{"url":["http://www.google.com"],"mode":["gyro"],"modeOptions":["drop-controlled-descent","seated-wireline-steering","slickline-memory","surface-readout-ms","wireline-orientation"],"diameter":{"usa":"(2.2)","intl":"(55.9mm)"},"accuracy":{"usa":"0.15 deg","intl":"0.15 deg"},"temp":{"usa":"(400F)","intl":"(204C)"},"speed":{"usa":"600 ft\/min","intl":"182.9m\/min"}}
        };

Her is my html form:

<form name="searchForm" id="searchForm">
        <select name="diameter">
            <option value="" selected="">Select One</option>
            <option value="1.2">1.2</option>
            <option value="1.75">1.75</option>
            <option value="2.2">2.2</option>
        </select>
        <select name="accuracy">
            <option value="" selected="">Select One</option>
            <option value="0.15 deg">0.15</option>
            <option value="0.5 deg">0.5</option>
            <option value="1 deg">1</option>
            <option value="2.5 deg">2.5</option>
        </select>
        <select name="temp">
            <option value="" selected="">Select One</option>
            <option value="257F">257F</option>
            <option value="300F">300F</option>
            <option value="400F">400F</option>
        </select>
        <select name="modeOptions">
            <option value="" selected="">Select One</option>
            <option value="surface-readout-ms">Surface Readout/MS</option>
            <option value="wireline-orientation">Wireline Orientation</option>
            <option value="memory-orientation">Memory Orientation</option>
            <option value="slickline-memory">Slickline memory</option>
            <option value="drop-controlled-descent">Drop – Controlled Descent</option>
            <option value="drop–freefall-descent">Drop – Freefall Descent</option>
            <option value="seated-wireline-steering">Seated Wireline Steering</option>
        </select>
        <input type="submit" value="submit"/>
    </form>

Answer 1

Get TaffyDB. It is made for these sorts of things.

Answer 2

Try something like

var $form = $('#searchForm'),
    $diameter = $form.find('select[name="diameter"]'),
    $accuracy = $form.find('select[name="accuracy"]'),
    $temp = $form.find('select[name="temp"]'),
    $modeOptions = $form.find('select[name="modeOptions"]');
$('#searchForm').submit(function (e) {
    e.preventDefault();
    var diameter = $diameter.val(),
        accuracy = $accuracy.val(),
        temp = $temp.val(),
        modeOptions = $modeOptions.val();

    var selected = $.map(data, function (obj) {
        return (!diameter || diameter == obj.diameter.usa) && (!accuracy || accuracy == obj.accuracy.usa) && (!temp || temp == obj.temp.usa) && (!modeOptions || $.inArray(modeOptions, obj.modeOptions) > -1) ? obj : undefined
    });

    //print result
    console.log('found:', selected);
    $('#result').html($.map(selected, function (val) {
        return '<p>' + JSON.stringify(val) + '</p>'
    }))
})

Demo: Fiddle