Search through array of objects, display partial results

Hi everyone, I hope you’re keeping well.

I was wondering if anyone can point me in the right direction; basically, I have a small JSON file with an array of objects and I am pushing each element into a JS array of objects using this:

let allData = [];
let xmlhttp = new XMLHttpRequest();
let url = "data2.json";

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
        let data = JSON.parse(this.responseText);
        for (var i = 0; i < data.length; i++) {
              var newUnit = {
                name : data[i].name,
                strongvs : data[i].strongvs,
                weakvs : data[i].weakvs
              };
              allData.push(newUnit);
            };
          };
    }

xmlhttp.open("GET", url, true);
xmlhttp.send();

All the data is pushed into the allData variable. So far, so good. allData objects look like this:

{
     name: "Paladin",
     strongvs: "Archer",
     weakvs: "Pikemen"
}

What I can’t seem to manage is this:

  • I want to take input from a box and display all the values in the object if they even partially match with the search query. For example, someone puts in “Arc”, I want to display all Strong vs. and all Weak vs. for Archers, Horse Archers and Elephant Archer. And the search result gets updated in real time, the more you type, the more precise results you get.

I have tried filtering, mapping, RegEx but I don’t think I fully understand how they work.

So if someone would be able to nudge me towards the right approach, I’d be very grateful.

Aren’t you just saying that you want to repeat the search on each change to the query?
The code itself has no need to be concerned with partial results.
If the results get increasingly narrow, then you could search only on the current results and save some time (if it matters at all, would need fairly large amount of entries for it to be significant)