Exploring an array for multiple values using match() function

Question

Exploring an array for multiple values using match() function

My goal is to retrieve the object that contains a value matching the searched text. Currently, I achieve this using the return match function. However, I am facing difficulties in testing for numbers within the array. The current implementation only works if I input the type or the name.

For instance, if I input '2', the expected output should be [{"type":"ABe 8/12", "name":"ZTZ","numbers":["1", "2", "3", "4", "7"]}]

The JSON data:

[
    {"type":"ABe 8/12", "name":"ZTZ","numbers":["1", "2", "3", "4", "7"]},
    {"type":"ABe 4/16", "name":"STZ","numbers":["5", "6", "8", "9", "12"]},
    {"type":"ABe 4/16", "name":"RTZ", "numbers":["10", "11", "13", "14", "15"]},
    {"type":"Test", "name":"RTZ", "numbers":["16", "17", "18", "19", "20"]}
]

The provided Javascript code fetches the data from the JSON file and filters it based on the search text entered by the user. It then logs the matches to the console.

If anyone has an alternative method to achieve this other than using the return match function, please let me know.

javascript json regex match

Answer 1

Answer №1

Here is my idea, take a look at the comments below.

const search = document.getElementById('search');
const searchData = async searchText => {
    const res = await fetch('https://cmd-golem.github.io/json/test.json');
    const resJson = await res.json();
    const regex = new RegExp(`^${searchText}`, 'gi'); // Ensuring it's outside the filter function.
    // Recursive function.
    const found = data => (Array.isArray(data) ? data.find(found) : data.match(regex));
    let matches = resJson.filter(data => (found(data.type) || found(data.name) || found(data.numbers)));
    console.log(matches);
};
search.addEventListener('input', () => searchData(search.value));

<input id="search" type="text" placeholder="Search">

Answer 2

Here is my idea, take a look at the comments below.

const search = document.getElementById('search');
const searchData = async searchText => {
    const res = await fetch('https://cmd-golem.github.io/json/test.json');
    const resJson = await res.json();
    const regex = new RegExp(`^${searchText}`, 'gi'); // Ensuring it's outside the filter function.
    // Recursive function.
    const found = data => (Array.isArray(data) ? data.find(found) : data.match(regex));
    let matches = resJson.filter(data => (found(data.type) || found(data.name) || found(data.numbers)));
    console.log(matches);
};
search.addEventListener('input', () => searchData(search.value));

<input id="search" type="text" placeholder="Search">

Answer 3

Answer №2

It seems like you were heading in the right direction. To search for specific quoted text, consider using code similar to this:

let data = [
  {"type":"ABe 8/12", "name":"ZTZ","numbers":["1", "2", "3", "4", "7"]},
  {"type":"ABe 4/16", "name":"STZ","numbers":["5", "6", "8", "9", "12"]},
  {"type":"ABe 4/16", "name":"RTZ", "numbers":["10", "11", "13", "14", "15"]},
  {"type":"Test", "name":"RTZ", "numbers":["16", "17", "18", "19", "20"]}
];

let filter = "2";
let pattern = new RegExp(`"${filter}"`);
let filtered = data.filter((d) => pattern.test(JSON.stringify(d)));

console.log(filtered);

By using stringify to convert each item into a string, and then employing a RexExp test, you can successfully check for any matches of filter within that string.

Answer 4

It seems like you were heading in the right direction. To search for specific quoted text, consider using code similar to this:

let data = [
  {"type":"ABe 8/12", "name":"ZTZ","numbers":["1", "2", "3", "4", "7"]},
  {"type":"ABe 4/16", "name":"STZ","numbers":["5", "6", "8", "9", "12"]},
  {"type":"ABe 4/16", "name":"RTZ", "numbers":["10", "11", "13", "14", "15"]},
  {"type":"Test", "name":"RTZ", "numbers":["16", "17", "18", "19", "20"]}
];

let filter = "2";
let pattern = new RegExp(`"${filter}"`);
let filtered = data.filter((d) => pattern.test(JSON.stringify(d)));

console.log(filtered);

By using stringify to convert each item into a string, and then employing a RexExp test, you can successfully check for any matches of filter within that string.

Exploring an array for multiple values using match() function

Answer №1

Answer №2

Similar questions

How can we verify if a function passed through mapDispatchToProps was invoked using RTL when there are no observable changes in the UI?

When working with multiple states in React, the toggle does not update on click when using setState

Name is the only piece of information that does not get stored in the

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

Mapping object data within an object in React: A step-by-step guide

Adding a file filter in Kendo v2016 is a simple process that can greatly enhance

Retrieving a boolean value from a function that includes an asynchronous AJAX request

Authenticating the Gmail API using a specified user ID

The inputs for Node express middleware are unclear and lack definition

Tips for managing white spaces in field names within a JSON file when constructing an Athena table

After the form is successfully submitted, you can remove the required attribute

I'm trying to figure out how to switch the Heroes array to the res array while utilizing the react useState hook. It's been successful in my past projects, but for some reason,

Deciphering key-value pairs that are separated by commas

Concealing the Footer on Mobile Websites in Muse UI When the Keyboard Appears

Unexpected behavior: jQuery events failing to execute while triggering the 'change' event with fireEvent

Retrieve Textures From an Assortment

Incorporate Voice Recognition into an HTML document

Designing a carousel-style menu list with navigation buttons for moving forward and backward

Exploring the Power of AngularJS' $resource with JAX-RS Integration

A guide to gathering a variety of data types for an array in Node.js