Filtering Pokémon Data with Loops and Conditionals in JavaScript

Welcome back to AutistiCoder! Today, we’re taking another step forward with our Pokémon app project by introducing loops with conditionals in JavaScript. This powerful technique allows us to filter data based on specific conditions, making our code both efficient and purposeful. Let’s dive in and see how we can use it to manage Pokémon data effectively!

Why Use Loops with Conditionals?

When working with data in coding, there are often situations where you need to filter through a dataset to find specific items or conditions. This is where loops with conditionals come in handy! Here’s why:

Filter Data: Loops with conditionals allow us to process only the data that meets a certain criterion.
Save Time: By using loops, we reduce repetitive code and let the loop handle data filtering.
Make Code Efficient: This approach helps our code run smoothly, even when working with large datasets.

In this post, we’ll focus on filtering Pokémon based on their HP (health points), specifically selecting only those Pokémon with high HP values.

Basic Loop with Conditionals Example

Let’s look at a basic example that will help us filter out Pokémon with a base HP over 50:

let pokemonList = [
    { name: "Pikachu", baseHP: 35 },
    { name: "Charmander", baseHP: 39 },
    { name: "Bulbasaur", baseHP: 45 },
    { name: "Snorlax", baseHP: 160 }
];

for (let i = 0; i < pokemonList.length; i++) {
    if (pokemonList[i].baseHP > 50) {
        console.log(pokemonList[i].name + " has high base HP.");
    }
}

In this code:

We create a list of Pokémon, each with a name and a baseHP value.
Our for loop iterates over each Pokémon in the list.
Within the loop, we use an if condition to check if each Pokémon’s base HP is greater than 50.
If the condition is met, we print a message to the console stating that the Pokémon has high base HP.

Adding the Loop and Conditional Code to Your Project

Now, let’s incorporate this code into our Pokémon app. Follow these steps to add the loop and conditional to pokemonData.js:

Open your pokeapi project in VSCode.
Go to the pokemonData.js file.
Add the code snippet above to filter Pokémon based on their HP values.
Save your changes.

This loop will allow our app to filter and display only the Pokémon with high HP directly in the console.

Running Your Code in Node.js

Once you’ve added the loop with conditionals to pokemonData.js, it’s time to test it in the terminal. Follow these steps:

Open your terminal and navigate to your app folder:bashCopy code

cd Documents/pokeapi/app

2. Run the pokemonData.js script by typing:

node pokemonData.js

This will execute the loop, filtering out Pokémon based on HP, and displaying only those with high base HP.

Expected Output

If everything is set up correctly, you should see an output like this in your terminal:

Snorlax has high base HP.

This confirms that the loop and condition are working as expected, filtering and displaying only Pokémon with a base HP greater than 50!

What’s Next?

Fantastic work! Now that we’ve incorporated loops with conditionals into our Pokémon app, you’re getting hands-on experience with one of JavaScript’s powerful features for managing data. Next, we’ll explore functions to make our code more organized and reusable. Functions will help us group code into reusable blocks, enhancing our app’s modularity.

Stay tuned, and keep coding with AutistiCoder! Don’t forget to follow along on YouTube and Instagram for video tutorials that match these blog posts.

Additional menu