Advanced search through a json array

Question

I'm creating an advanced search in a project in school. I'm pretty new to JavaScript, so it might be an easy question, but every suggestion or solution is very much appreciated.

We got served a JSON array which contains 15 objects in total, each containing the same keys but with different values.

It's set up on a website with different buttons which a user can check to be shown results based on their requirements.

Say if I have an array containing 3 objects:

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"}
]';

The jsonArray is already parsed and sorted.

We're also requested to create an object representing the requirements from the user.

So if the user clicks on the button "la" and "wh" on the website, it will then create an object;

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

Which would give the first element in the array only.

This is how far I've gotten really. I've tried different kind of solutions from other similar questions regarding this, but couldn't quite figure it out.

How can I compare newObject with jsonArray to perhaps create a new/or update the current array with objects that contains these values? On the other keys it doesn't matter what the values are, just as long as the keys and values between jsonArray and newObject match.

Also worth noting that we're not allowed to use jQuery or anything other than JavaScript.

a) it is not really clear what problem you need to solve. b) I don't see any code related to you attempting to solve any kind of problem. Downvote. — connexo, Mar 05 '18 at 19:38
[https://stackoverflow.com/questions/4587061/how-to-determine-if-object-is-in-array](https://stackoverflow.com/questions/4587061/how-to-determine-if-object-is-in-array) — Matthew Weir, Mar 05 '18 at 19:39
It's going to be harder than necessary to match `{la: 1, ...}` with `{la: "1", ...}` Could they both be numbers or both be strings? — Scott Sauyet, Mar 05 '18 at 19:49

score 1 · Accepted Answer · answered Mar 05 '18 at 20:16

Basically, your newObject (which I would call query) represents a list of conditions to filter your jsonArray (which I would call database). Here's a simple way to implement this filtering:

let result be database
split query into pairs property, value
for each pair, filter result to find objects where .property === value

Example:

let result = database;

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

Simple as that. Thanks a lot! – Kjetil Mar 05 '18 at 21:34 — Kjetil, Mar 05 '18 at 21:34

score 0 · Answer 2 · answered Mar 05 '18 at 20:32

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

Advanced search through a json array

2 Answers2