关于javascript:通过json数组进行高级搜索

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。


基本上,你的newObject(我称之为query)代表了过滤你的jsonArray的条件列表(我称之为database)。以下是实现此筛选的简单方法:

  • resultdatabase
  • 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 ="";
}