An introduction -- and a bit about how to use .filter() with multiple parameters

Welcome to my first blog post here on Dev -- I'm excited to join the community and meet interesting people working in the industry.

I'm going to talk about a technical challenge I recently faced as a new developer and how I ultimately solved it, but first, I thought I'd give a bit of background about how I ended up 35 years old and joining a STEM field for the first time.

From 2018 through 2023, I worked as an editorial staffer at a FinTech startup. I wrote about personal finance and hopefully helped people make better decisions with their money -- all the while improving the brand recognition of the company and bringing potential users to the site through the power of SEO. I never imagined myself working at a startup -- when I was in journalism school I imagined myself as an old-school ink-stained newspaper reporter, winning prizes and traveling the world. I came to really love that job, though, which made getting laid off in June 2023 even more painful.

I took a job at a major legacy news company a few months later, again writing about personal finance. This job was, to be frank, a bad fit -- so I ended up quitting to find something better. I realize quickly, though, that while that job had been a particularly bad fit, I was also bored with my career in general -- and I needed to make a change quickly. A few conversations with friends and family -- plus thinking about the engineering team at that startup -- led me to software engineering and, ultimately, Flatiron School, where I'm currently finishing the first phase of a software engineering bootcamp.

Which brings me to the real meat of this blog post -- a bit about how I used my newly acquired and still percolating development skills to solve a problem regarding array iteration and searching in a JSON file.

For my first project at Flatiron, I built a simple tool to search through a database of playgrounds in Brooklyn -- something that would be useful to me, a parent constantly looking for something to do with my daughter.

After building a JSON database with around 25 playgrounds to start with, I set up an HTML form with three radio buttons for inputs, asking users if they need their playground to have bathrooms, wheelchair access and inclusive play elements.

From there, I wanted to return a list to the user of playgrounds that fit their needs. I knew how to use the .filter() array method to find the elements of an array that fit one parameter, but I didn't know how to do so for multiple inputs.

This is going to sound made up, but I shit you not -- I realized how to do it one night last week when I was just about to fall asleep. While I didn't do the movie-scene thing of jumping out of bed, running to my computer and going on an all-night coding binge, I did get up, grab my notebook and sketch out a solution.

I still had a few things to figure out the next morning, but the idea that I needed to use a series of if/else statements using the && operator was the key here. From there, it was mostly about nailing down the arguments to put into the .filter() and making sure the list poster correctly. The final code for the first if statement is below:

if((bathrooms ==="yes") && (wheelchair === "yes") && (inclusive === "yes") ){
            const yesYesYes = playgrounds.filter((playground) =>{
                return (playground.bathrooms.includes("Yes")) && (playground.wheelchair === "Yes") && (playground.inclusive === "Yes") 
            })
            yesYesYes.forEach(playground =>{
                const li =document.createElement("li");
                li.textContent = playground.name
                li.setAttribute("id", "playground " + playground.id);
                li.setAttribute("class", "playground");
                li.addEventListener("mouseover", () =>{
                    li.innerHTML = (playground.name + "<br> " + playground.location)
                li.addEventListener("mouseout", ()=>{
                    li.textContent = (playground.name)
                li.addEventListener("click", ()=>{
                    populateMain(playground)
                })
                })
                })

                document.querySelector("#playgroundList").append(li)

When I first wrote my code, I was returning an empty array when I tried to console.log() the "yesYesYes" constant created in the code above. After a good bit of mucking about and a small amount of head-desk slamming, I realized two things were happening -- first, I was using the === operator for the bathroom parameter when I needed to use the .includes() method. This is because the JSON database includes an additional detail in the in the values for each "bathrooms" key -- if the bathrooms are accessible or not.

Secondly, I forgot to return the new array I was creating. This one made me feel especially dull, but I'm told that's a feeling I should get used to in a career as a developer.

In any event, I hope you've enjoyed this blog. If you're a working dev, please feel to reach out! I'd love to hear from you -- and, let's be real, to work with you! If you've discovered this blog because you searched "how to used .filter() with multiple parameters," I hope this helped you. And if you're reading this because you clicked on if from my LinkedIn, simply thanks for taking the time. I'll be blogging more during my time in boot camp and perhaps beyond.