How to return ONLY the matched / filtered string in an array?

Question

I'm creating a small application for connection to an API and append cards from magic the gathering JSON file onto an HTML webpage.

Those cards should be searchable and for that to happen I need to somehow create a filter()

I'm new and still in school at this subject.

I have pulled out only the card Names in the variable called "arr" and is trying to filter out / or match with a value from the search input field which is "strInput"

document.getElementById("searchButton").addEventListener("click", function(e){
    
    const parentDiv = document.getElementById("cards");
    if ( parentDiv.hasChildNodes() === true ) {
        removeStuff();
    } else {
        filteredCards("https://api.magicthegathering.io/v1/cards");
    }

    }, false)

    displayCards("https://api.magicthegathering.io/v1/cards");
    
    function filteredCards(url) {
      fetch(url)
        .then((resp) => resp.json())
        .then((data) => { 
    
          let myInput = document.getElementById("search").value;
          let strInput = '"' + myInput + '"';
          let arr = [];
    
          for ( i in data.cards) {
            let jsonValue = data.cards[i];
            let name = jsonValue.name;
            arr.push(name);   
          }
         
          let result = strInput.match(arr);
          console.log(result);
          console.log(arr);
          console.log(strInput);
        });
    };

    console.log(arr); // returns NULL even thought the string matches.

Answer 1

The parameter passed to match method is not really a matcher but a string. The method expects a regex to be passed in.

Just build out a simple regex expression and then iterate over the data.cards and add it into the array if the condition passes. You can look at the filter available on the array object.

let myInput = document.getElementById("search").value;
let myInputRegex = new Regex(myInput, 'gi');
let arr = [];

const matchedTokens = data.cards.filter(card => {
  return card.name.match(myInputRegex);
});

console.log(matchedTokens);
console.log(strInput);

Answer 2

There's two ways to do it simply that I could think of, .find() and .filter()

.find() is going to return you the first match, and as a string

.filter() is going to return you the all matches, and as an array

They both work with the same style of code, you're just changing the method name

arr.filter(item => item === strInput) | arr.find(item => item === strInput

---

Just as a little aside, there's a few things you could swap out to get those sweet sweet brownie points

let arr = [];

for ( i in data.cards) {
  let jsonValue = data.cards[i];
  let name = jsonValue.name;
  arr.push(name);   
}

Can instead be wrote using the map function

let arr = data.cards.map((card) => card.name);

.

Also, you don't need to do '"' + myInput + '"'; to make sure something is a string, which is what you might be trying to do there - you can just use myInput.toString() - of course your data might have the names include the quotes, but just in case this is a mistake I thought I'd point it out

Answer 3

You can make a method that uses array.Find() and pass in the arr and strInput. array.Find() will find the first match

getName: function (arr, strInput) {
  var name = arr.find(n => n === strInput)
  return name
}

Here's some more reading from the official mozzila docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Answer 4

Thanks! This was exactly what i was looking for :D

let myInput = document.getElementById("search").value;
let myInputRegex = new Regex(myInput, 'gi');
let arr = [];

const matchedTokens = data.cards.filter(card => {
  return card.name.match(myInputRegex);
});

console.log(matchedTokens);
console.log(strInput);