Javascript 过滤对象
我希望有人能给我指出正确的方向或给我举个例子。我试图使用一个带有四个过滤器选项的表单过滤这个多维json对象(见下文) 用户做出选择并点击提交按钮后,该产品或服务的详细信息结果将显示在页面上(即…指向该产品的链接、该产品的内容),根据搜索过滤器,还可以显示多个产品或服务。有人能帮我吗 这是我的目标:Javascript 过滤对象,javascript,jquery,arrays,Javascript,Jquery,Arrays,我希望有人能给我指出正确的方向或给我举个例子。我试图使用一个带有四个过滤器选项的表单过滤这个多维json对象(见下文) 用户做出选择并点击提交按钮后,该产品或服务的详细信息结果将显示在页面上(即…指向该产品的链接、该产品的内容),根据搜索过滤器,还可以显示多个产品或服务。有人能帮我吗 这是我的目标: var data = { "Product":{"url":["http://www.google.com"],"mode":["gyro"],"modeOptions":["dro
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"}}
};
她是我的html表单:
<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>
选择一个
1.2
1.75
2.2
选择一个
0.15
0.5
1.
2.5
选择一个
257F
300F
400F
选择一个
表面读数/MS
电缆定向
记忆取向
流线型存储器
下降控制下降
下降-自由下落下降
坐式钢丝绳转向
获取它是为这类事情而设计的。试试类似的东西
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>'
}))
})
var$form=$(“#searchForm”),
$diameter=$form.find('select[name=“diameter”]'),
$accurity=$form.find('select[name=“accurity”]'),
$temp=$form.find('select[name=“temp”]'),
$modeOptions=$form.find('select[name=“modeOptions”]”);
$('#searchForm')。提交(函数(e){
e、 预防默认值();
var diameter=$diameter.val(),
精度=$accurity.val(),
temp=$temp.val(),
modeOptions=$modeOptions.val();
所选变量=$.map(数据、函数(obj){
返回(!diameter | | diameter==obj.diameter.usa)&(!accurity | | accurity==obj.accurity.usa)&(!temp | | temp==obj.temp.usa)&(!modeOptions | |$.inArray(modeOptions,obj.modeOptions)>-1)?obj:未定义
});
//打印结果
console.log('found:',selected);
$('#result').html($.map(已选定,函数(val)){
返回''+JSON.stringify(val)+''
}))
})
演示:它是一个对象而不是数组yi,它不是数组,它是一个对象。但是,您可以使用
Object.keys(data).forEach()对其进行迭代