What is the method for exclusively retrieving the matched/filtered string from an array?

Question

What is the method for exclusively retrieving the matched/filtered string from an array?

I am currently developing a small application that connects to an API to display Magic: The Gathering cards on an HTML webpage. These cards should be searchable, but as I am still learning and in school for this subject, I need help creating a filter function.

So far, I have extracted the card names into a variable called "arr" and am attempting to filter or match them with a value from the search input field labeled "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 though the string matches.

javascript arrays filter

Answer 1

Answer №1

There are two straightforward ways to accomplish this task that come to mind: .find() and .filter()

.find() will retrieve the first matching item as a string

.filter() will return all matches in an array format

Both methods utilize a similar coding style, with the main difference being the method name used

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

|

arr.find(item => item === strInput

As a side note, you can replace several lines of code to enhance efficiency

let arr = [];

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

This can be simplified by using the map function

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

.

Additionally, there's no need to use '"' + myInput + '"' to convert something to a string. Instead, you can simply employ myInput.toString(). Although if your data specifically requires quotes around certain values, make sure to take that into account.

Answer 2

There are two straightforward ways to accomplish this task that come to mind: .find() and .filter()

.find() will retrieve the first matching item as a string

.filter() will return all matches in an array format

Both methods utilize a similar coding style, with the main difference being the method name used

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

|

arr.find(item => item === strInput

As a side note, you can replace several lines of code to enhance efficiency

let arr = [];

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

This can be simplified by using the map function

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

.

Additionally, there's no need to use '"' + myInput + '"' to convert something to a string. Instead, you can simply employ myInput.toString(). Although if your data specifically requires quotes around certain values, make sure to take that into account.

Answer 3

Answer №2

When passing a parameter to the match method, it's important to note that it should be a regular expression, not just a string. The method requires a valid regex.

To achieve this, create a simple regex expression and loop through the data.cards array, adding elements that meet the condition. Utilize the filter method available for arrays.

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 4

When passing a parameter to the match method, it's important to note that it should be a regular expression, not just a string. The method requires a valid regex.

To achieve this, create a simple regex expression and loop through the data.cards array, adding elements that meet the condition. Utilize the filter method available for arrays.

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 5

Answer №3

Creating a method that utilizes array.Find() is a great way to search for a specific element in an array. Simply pass in the array and the target string input, and array.Find() will locate the first matching element.

findElement: function (arr, strInput) {
  var element = arr.find(item => item === strInput)
  return element
}

If you'd like to dive deeper into this topic, check out the official Mozilla documentation at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Answer 6

Creating a method that utilizes array.Find() is a great way to search for a specific element in an array. Simply pass in the array and the target string input, and array.Find() will locate the first matching element.

findElement: function (arr, strInput) {
  var element = arr.find(item => item === strInput)
  return element
}

If you'd like to dive deeper into this topic, check out the official Mozilla documentation at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Answer 7

Answer №4

Thank you for your help! I found exactly what I needed :)

const userInput = document.getElementById("search").value;
const inputRegex = new Regex(userInput, 'gi');
const array = [];

const matchedItems = data.cards.filter(item => {
  return item.name.match(inputRegex);
});

console.log(matchedItems);
console.log(strInput);

Answer 8

Thank you for your help! I found exactly what I needed :)

const userInput = document.getElementById("search").value;
const inputRegex = new Regex(userInput, 'gi');
const array = [];

const matchedItems = data.cards.filter(item => {
  return item.name.match(inputRegex);
});

console.log(matchedItems);
console.log(strInput);

What is the method for exclusively retrieving the matched/filtered string from an array?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Subtracting time in ReactJS with Moment.js for efficient date and time operations

The function "getWatchLength" is being called in the render process without being defined on the instance. Remember to define reactive data properties in the data option of Vue.js

NodeJS is throwing a `ReferenceError` because the `io` variable is not

"when using .each to parse JSON, the result comes

The function e.preventDefault() appears to be ineffective when applied to both the submit button and anchor tag within an

What is the method for obtaining receipt numbers in sequential order, such as the format AB0810001?

Exploring Arrays in C++: Searching and Summarizing

modify the name attribute of a select dropdown using jQuery dynamically

Rendering EJS Template Views Dynamically Based on Conditions within the Same Path

The Drop Down Menu feature in Bootstrap is malfunctioning within the context of a NextJS project

Reverse a filter within an ng-repeat loop - AngularJS

issue with manipulating URLs in Express routing

Ways to adjust the color of a cell in a table

Perform an ajax POST call to a server using ajax/jQuery techniques

When you click on the Prev/Next arrow in the JS slider, the image suddenly

Adjusting the parent div width to match the child div width

Obtaining the total count by using getGridParam() following the execution of trigger("reloadGrid")

Getting rid of the white corners on points using ThreeJS

Add a dynamic widget to a specific element in the document object model in real time

Employing the new operator in conjunction with a variable