Javascript - Search inside a grouped array

aries
October 5, 2023
197 views
2 votes
3 Answers

I have a json like this grouped by date and represents the events of the day with title and abstract:

[
    {
        "groupKey": "2023-10-12",
        "events": [
            {
                "uid": "4bd2d222",
                "title": "LEAVE IT TILL LATER",
                "abstract": "One of the most valuable pieces of advice we have picked up during our time in this... the only exception to made up words that we can think of..."
            },
            {
                "uid": "f271d19a",
                "title": "DARE TO BE DIFFERENT",
                "abstract": "It’s tough to stand out in the events business but if you can come up with a good name, you should use it..."
            }
        ]
    },
    {
        "groupKey": "2023-10-17",
        "events": [
            {
                "uid": "22e9d4c5",
                "title": "SHORT AND SWEET",
                "abstract": "Short and snappy names work best. Something that is catchy, on point... words are..."
            },
            {
                "uid": "e456d19a",
                "title": "INITIALS AND ABBREVIATIONS",
                "abstract": "Checking initials and abbreviations is something every event planner..."
            }
        ]
    },
    {
        "groupKey": "2023-10-19",
        "events": [
            {
                "uid": "7bbd8c4f",
                "title": "PLAY ON WORDS",
                "abstract": "Wordplay is great fun but also incredibly difficult to pull off. Double entendre, double meanings..."
            },
            {
                "uid": "LeIaCRXmr",
                "title": "TRY TO AVOID MADE UP WORDS",
                "abstract": "If you’re trying to name a business event, try to avoid made up words if possible..."
            },
            {
                "uid": "8611ae0e",
                "title": "PORTMANTEAU",
                "abstract": "Technically, a portmanteau word is a made up word but it is made up of real words combined in creative ways..."
            }
        ]
    }
]

I can search in the ‘title’ or ‘abstract’ fields, the search must return an array with the same structure.
For example, if I have to search for "word" the search function will have to return a json like the following:

[
    {
        "groupKey": "2023-10-12",
        "events": [
            {
                "uid": "4bd2d222",
                "title": "LEAVE IT TILL LATER",
                "abstract": "One of the most valuable pieces of advice we have picked up during our time in this... the only exception to made up words that we can think of..."
            }
        ]
    },
    {
        "groupKey": "2023-10-17",
        "events": [
            {
                "uid": "22e9d4c5",
                "title": "SHORT AND SWEET",
                "abstract": "Short and snappy names work best. Something that is catchy, on point... words are..."
            }
        ]
    },
    {
        "groupKey": "2023-10-19",
        "events": [
            {
                "uid": "7bbd8c4f",
                "title": "PLAY ON WORDS",
                "abstract": "Wordplay is great fun but also incredibly difficult to pull off. Double entendre, double meanings..."
            },
            {
                "uid": "LeIaCRXmr",
                "title": "TRY TO AVOID MADE UP WORDS",
                "abstract": "If you’re trying to name a business event, try to avoid made up words if possible..."
            },
            {
                "uid": "8611ae0e",
                "title": "PORTMANTEAU",
                "abstract": "Technically, a portmanteau word is a made up word but it is made up of real words combined in creative ways..."
            }
        ]
    }
]

containing ‘word’ in the ‘title’ and ‘abstract’ fields

I don’t know how to use array.filter in a grouped array, can anyone help me? I searched online but didn’t find anything.
Thank you

Answers

Use the map method on the data array. For each group, filter its events based on whether the event’s title or abstract contains the search term.
After filtering events for each group, return the group with its filtered events.
After the map, some groups might have no events left. Use the filter method to remove these empty groups.

function searchEvents(data, searchTerm) {
    return data
        .map(group => {
            // Filter events based on the search term
            let filteredEvents = group.events.filter(event => 
                event.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
                event.abstract.toLowerCase().includes(searchTerm.toLowerCase())
            );

            // Return the group with filtered events
            return {
                ...group,
                events: filteredEvents
            };
        })
        // Filter out groups with no matching events
        .filter(group => group.events.length > 0);
}

const data = [ /* your JSON data */ ];
const searchTerm = "word";
const result = searchEvents(data, searchTerm);
console.log(result);

Reduce the array with filtered items:

const filterEvents = (data, word) => {
  const regex = new RegExp(word, 'i');
  return data.reduce((r, item) => {
    const filtered = item.events.filter(({title, abstract}) => regex.test(title) || regex.test(abstract));
    filtered.length && r.push({...item, events:filtered});
    return r;
  }, []);
};

console.log(filterEvents(data, 'word'));

<script>
const data = [
    {
        "groupKey": "2023-10-12",
        "events": [
            {
                "uid": "4bd2d222",
                "title": "LEAVE IT TILL LATER",
                "abstract": "One of the most valuable pieces of advice we have picked up during our time in this... the only exception to made up words that we can think of..."
            },
            {
                "uid": "f271d19a",
                "title": "DARE TO BE DIFFERENT",
                "abstract": "It’s tough to stand out in the events business but if you can come up with a good name, you should use it..."
            }
        ]
    },
    {
        "groupKey": "2023-10-17",
        "events": [
            {
                "uid": "22e9d4c5",
                "title": "SHORT AND SWEET",
                "abstract": "Short and snappy names work best. Something that is catchy, on point... words are..."
            },
            {
                "uid": "e456d19a",
                "title": "INITIALS AND ABBREVIATIONS",
                "abstract": "Checking initials and abbreviations is something every event planner..."
            }
        ]
    },
    {
        "groupKey": "2023-10-19",
        "events": [
            {
                "uid": "7bbd8c4f",
                "title": "PLAY ON WORDS",
                "abstract": "Wordplay is great fun but also incredibly difficult to pull off. Double entendre, double meanings..."
            },
            {
                "uid": "LeIaCRXmr",
                "title": "TRY TO AVOID MADE UP WORDS",
                "abstract": "If you’re trying to name a business event, try to avoid made up words if possible..."
            },
            {
                "uid": "8611ae0e",
                "title": "PORTMANTEAU",
                "abstract": "Technically, a portmanteau word is a made up word but it is made up of real words combined in creative ways..."
            }
        ]
    }
]
</script>

You can use the array.filter for the inner array just like you do with the main array, and filter the outer array based on if there are any matching element in the inner array.

const data = [
    {
        "groupKey": "2023-10-12",
        "events": [
            {
                "uid": "4bd2d222",
                "title": "LEAVE IT TILL LATER",
                "abstract": "One of the most valuable pieces of advice we have picked up during our time in this... the only exception to made up words that we can think of..."
            },
            {
                "uid": "f271d19a",
                "title": "DARE TO BE DIFFERENT",
                "abstract": "It’s tough to stand out in the events business but if you can come up with a good name, you should use it..."
            }
        ]
    },
    {
        "groupKey": "2023-10-17",
        "events": [
            {
                "uid": "22e9d4c5",
                "title": "SHORT AND SWEET",
                "abstract": "Short and snappy names work best. Something that is catchy, on point... words are..."
            },
            {
                "uid": "e456d19a",
                "title": "INITIALS AND ABBREVIATIONS",
                "abstract": "Checking initials and abbreviations is something every event planner..."
            }
        ]
    },
    {
        "groupKey": "2023-10-19",
        "events": [
            {
                "uid": "7bbd8c4f",
                "title": "PLAY ON WORDS",
                "abstract": "Wordplay is great fun but also incredibly difficult to pull off. Double entendre, double meanings..."
            },
            {
                "uid": "LeIaCRXmr",
                "title": "TRY TO AVOID MADE UP WORDS",
                "abstract": "If you’re trying to name a business event, try to avoid made up words if possible..."
            },
            {
                "uid": "8611ae0e",
                "title": "PORTMANTEAU",
                "abstract": "Technically, a portmanteau word is a made up word but it is made up of real words combined in creative ways..."
            }
        ]
    }
]

const search = "word";

const results = data.filter(group => {
  //filter the inner array
  return group.events.filter(
    event => 
      event.title.toLowerCase().includes(search) || 
      event.abstract.toLowerCase().includes(search)
  ).length > 0;
});
  
console.log(results);

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Search inside a grouped array

Answers