Advanced search through a json array
我正在学校的一个项目中创建高级搜索。我对JavaScript还很陌生,所以这可能是一个简单的问题,但每一个建议或解决方案都非常感谢。
我们得到了一个JSON数组,它总共包含15个对象,每个对象包含相同的键,但具有不同的值。
它设置在一个有不同按钮的网站上,用户可以根据自己的要求检查显示的结果。
假设我有一个包含3个对象的数组:
1 2 3 4 5 | var jsonArray = '[ {"gm":"0","la":"1","wh":"1","place":"somePlace1"}, {"gm":"1","la":"0","wh":"1","place":"somePlace2"}, {"gm":"0","la":"1","wh":"0","place":"somePlace3"} ]'; |
JSONarray已经被解析和排序。
我们还需要创建一个表示用户需求的对象。
因此,如果用户单击网站上的"la"和"wh"按钮,它将创建一个对象;
1 | var newObject = {la:1, wh:1}; |
它只提供数组中的第一个元素。
这就是我真正走了多远。关于这个问题,我试过其他类似问题的不同解决方法,但没能完全弄明白。
如何将newobject与jsonarray进行比较,以创建新的/或使用包含这些值的对象更新当前数组?在其他键上,值是什么并不重要,只要jsonarray和newobject之间的键和值匹配。
同样值得注意的是,我们不允许使用jquery或其他任何Javascript。
基本上,你的
- 让
result 为database 。 - 将
query 分成对property, value 。 - 对于每对,过滤
result 以查找.property ==value 的对象。
例子:
1 2 3 4 | let result = database; for (let [property, value] of Object.entries(query)) result = result.filter(item => item[property] === value) |
HTML
1 2 3 4 5 6 7 | <label for="gm">gm</label><input type="number" id="gm"/> <label for="la">la</label><input type="number" id="la"/> <label for="wh">wh</label><input type="number" id="wh"/> <label for="place">place</label><input type="text" id="place"/> <button onclick="doFilter()">Filter</button> <button onclick="clearIt()">Clear</button> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | var jsonArray = [ {"gm":"0","la":"1","wh":"1","place":"somePlace1"}, {"gm":"1","la":"0","wh":"1","place":"somePlace2"}, {"gm":"0","la":"1","wh":"0","place":"somePlace3"} ]; function doFilter() { var gm = document.getElementById("gm").value.trim(); var la = document.getElementById("la").value.trim(); var wh = document.getElementById("wh").value.trim(); var place = document.getElementById("place").value.trim(); var filterObj = {}; if (gm !="") { filterObj.gm = gm; } if (la !="") { filterObj.la = la; } if (wh !="") { filterObj.wh = wh; } if (place !="") { filterObj.place = place; } var filtered = processFilter(filterObj); displayResults(filtered); } function processFilter(filterObj) { var filtered = []; for (var i = 0; i < jsonArray.length; i++) { var test = true; var jsonMember = jsonArray[i]; for (var key in filterObj) { if (jsonMember[key] === undefined || jsonMember[key] != filterObj[key]) { test = false; } } if (test) { filtered.push(jsonMember); } } return filtered; } function displayResults(filtered) { var html ="<table><tr><th>GM</th><th>LA</th><th>WH</th><th>Place</th></tr>"; if (filtered && filtered.length > 0) { for (var i = 0; i < filtered.length; i++) { var obj = filtered[i]; html +="<tr><td>" + (obj.gm ? obj.gm :"") +"</td>"; html +="<td>" + (obj.la ? obj.la :"") +"</td>"; html +="<td>" + (obj.wh ? obj.wh :"") +"</td>"; html +="<td>" + (obj.place ? obj.place :"") +"</td>"; html +="</tr>"; } } html +="</table>"; document.getElementById("filter-results").innerHTML = html; } function clearIt() { document.getElementById("gm").value =""; document.getElementById("la").value =""; document.getElementById("wh").value =""; document.getElementById("place").value =""; } |