通过 json 数组进行高级搜索

Question

我正在学校的一个项目中创建高级搜索。我对 JavaScript 很陌生，所以这可能是一个简单的问题，但非常感谢每一个建议或解决方案。

我们得到了一个 JSON 数组，它总共包含 15 个对象，每个对象包含相同的键但具有不同的值。

它设置在具有不同按钮的网站上，用户可以检查这些按钮以根据他们的要求显示结果。

假设我有一个包含 3 个对象的数组：

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”按钮，就会创建一个对象；

var newObject = {la:1, wh:1};

这将只给出数组中的第一个元素。

这就是我真正做到的程度。我已经尝试了与其他类似问题不同的解决方案，但无法完全弄清楚。

如何比较 newObject 和 jsonArray 以创建一个新的/或使用包含这些值的对象更新当前数组？在其他键上，值是什么并不重要，只要 jsonArray 和 newObject 之间的键和值匹配即可。

另外值得注意的是，我们不允许使用 jQuery 或 JavaScript 以外的任何东西。

Answer 1

基本上，您的newObject（我将其称为query）表示过滤您的jsonArray（我将其称为database）的条件列表。这是实现此过滤的简单方法：

• 让result 成为database
• 将query 拆分成对property, value
• 对于每一对，过滤 result 以找到 .property === value 的对象

例子：

let result = database;

for (let [property, value] of Object.entries(query))
    result = result.filter(item => item[property] === value)

Answer 2

HTML

<div><label for="gm">gm</label><input type="number" id="gm"/></div>
<div><label for="la">la</label><input type="number" id="la"/></div>
<div><label for="wh">wh</label><input type="number" id="wh"/></div>
<div><label for="place">place</label><input type="text" id="place"/></div>
<div>
    <button onclick="doFilter()">Filter</button>
    <button onclick="clearIt()">Clear</button>
</div>
<div id="filter-results"></div>

JAVASCRIPT

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