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

通过json数组进行高级搜索

2 个答案: