Pokemon JSON Parser - Activity 02

Master the art of JSON parsing and the fetch API with Pokemon! This comprehensive project teaches you how to work with complex, nested JSON data structures through the engaging Pokemon API.

🎯 Learning Objectives

By completing this activity, you will:

• Master JSON parsing with real-world, complex data structures
• Work with nested objects and arrays confidently
• Use async/await effectively with the fetch API
• Extract specific data from large JSON responses
• Handle multiple API calls simultaneously with Promise.all()
• Build interactive features that process and display data dynamically

🚀 Getting Started

Option One: StackBlitz (Recommended)

1. Fork this template in StackBlitz
2. Start coding immediately
3. All APIs work without CORS issues

Option 2: Local Development

1. Download the template files
2. Start a local server:
   bash

   python3 -m http.server 8000
   

3. Open http://localhost:8000

📋 Tasks Overview

Core JSON Parsing Tasks (Required)

TODO 1: Basic Pokemon Search ⭐

• Implement the main search functionality
• Learn basic fetch() and JSON parsing
• Difficulty: Beginner

TODO 2: Random Pokemon Generator ⭐

• Generate random Pokemon IDs
• Practice with dynamic API endpoints
• Difficulty: Beginner

TODO 3: Raw JSON Display ⭐⭐

• Show formatted JSON data
• Understand the full data structure
• Difficulty: Easy

Advanced JSON Parsing (Skill Building)

TODO 4: Stats Parser ⭐⭐⭐

• Extract and format Pokemon statistics
• Work with nested arrays and objects
• Difficulty: Medium

TODO 5: Moves Parser ⭐⭐⭐

• Parse complex move data
• Handle large arrays (100+ moves)
• Difficulty: Medium

TODO 6: Types Parser ⭐⭐⭐

• Extract type information
• Apply dynamic CSS styling
• Difficulty: Medium

Challenge Features (Advanced)

TODO 7: Pokemon Comparison ⭐⭐⭐⭐

• Fetch multiple Pokemon simultaneously
• Compare stats and attributes
• Difficulty: Advanced

TODO 8: Team Builder ⭐⭐⭐⭐

• Build random 3-Pokemon teams
• Process multiple API responses
• Difficulty: Advanced

🔧 Technical Details

Pokemon API Structure

The Pokemon API returns complex JSON with this structure:

{
  "id": 25,
  "name": "pikachu",
  "height": 4,
  "weight": 60,
  "types": [
    {
      "slot": 1,
      "type": {
        "name": "electric",
        "url": "https://pokeapi.co/api/v2/type/13/"
      }
    }
  ],
  "stats": [
    {
      "base_stat": 35,
      "effort": 0,
      "stat": {
        "name": "hp",
        "url": "https://pokeapi.co/api/v2/stat/1/"
      }
    }
  ],
  "moves": [...], // 100+ moves
  "sprites": {
    "front_default": "image_url"
  }
}

Key JSON Parsing Patterns

// Accessing nested properties
const pokemonName = data.name;
const firstType = data.types[0].type.name;
const hpStat = data.stats[0].base_stat;

// Processing arrays
const typeNames = data.types.map(type => type.type.name);
const statValues = data.stats.map(stat => stat.base_stat);

// Filtering arrays
const firstTenMoves = data.moves.slice(0, 10);
const attackMoves = data.moves.filter(move =>
  move.move.name.includes('attack')
);

🎓 Step-by-Step Guide

Phase One: Basic Functionality (TODOs 1-3)

1. Start with TODO 1 - Pokemon Search

   javascript

   // API endpoint to use:
   `https://pokeapi.co/api/v2/pokemon/${pokemonName}`
   
   // Basic pattern:
   const response = await fetch(url);
   const data = await response.json();
   currentPokemonData = data;
   displayPokemonCard(data);
   

2. Complete TODO 2 - Random Pokemon

   javascript

   // Generate random ID:
   const randomId = Math.floor(Math.random() * 1010) + 1;
   
   // Use same API pattern as TODO 1
   

3. Finish TODO 3 - Raw JSON

   javascript

   // Format JSON for display:
   JSON.stringify(currentPokemonData, null, 2)
   

Phase 2: Data Extraction (TODOs 4-6)

4. TODO 4: Stats Parsing

   javascript

   // Extract stats array:
   const stats = currentPokemonData.stats;
   
   // Process each stat:
   stats.forEach(stat => {
     const name = stat.stat.name;
     const value = stat.base_stat;
     // Display them
   });
   

5. TODO 5: Moves Parsing

   javascript

   // Get first 10 moves:
   const moves = currentPokemonData.moves.slice(0, 10);
   
   // Extract move names:
   const moveNames = moves.map(move => move.move.name);
   

6. TODO 6: Types Parsing

   javascript

   // Extract types:
   const types = currentPokemonData.types;
   
   // Create styled type badges:
   types.map(type =>
     `<span class="type-${type.type.name}">${type.type.name}</span>`
   );
   

Phase 3: Advanced Features (TODOs 7-8)

7. TODO 7: Comparison

   javascript

   // Fetch multiple Pokemon:
   const [data1, data2] = await Promise.all([
     fetch(`/pokemon/${pokemon1}`).then(r => r.json()),
     fetch(`/pokemon/${pokemon2}`).then(r => r.json())
   ]);
   

8. TODO 8: Team Builder

   javascript

   // Generate multiple random IDs:
   const ids = [1, 2, 3].map(() =>
     Math.floor(Math.random() * 1010) + 1
   );
   
   // Fetch all at once:
   const teamData = await Promise.all(
     ids.map(id => fetch(`/pokemon/${id}`).then(r => r.json()))
   );
   

🧪 Testing Your Work

Manual Testing Checklist

Basic Functionality:

• Search works with "pikachu", "charizard", "ditto"
• Random Pokemon button generates different Pokemon
• Raw JSON displays formatted data
• Loading states appear during API calls

Data Parsing:

• Stats show HP, Attack, Defense, etc. with numbers
• Moves list shows move names (not URLs)
• Types display with proper colors/styling
• All parsing works with different Pokemon

Advanced Features:

• Comparison shows two Pokemon side-by-side
• Team builder creates 3-Pokemon teams
• Error handling works with invalid Pokemon names
• All features work on mobile devices

Common Issues & Solutions

"Pokemon not found" errors:

• Try lowercase names: "charizard" not "Charizard"
• Use English names: "pikachu" not "ピカチュウ"
• Check spelling carefully

"Cannot read property" errors:

• Check that currentPokemonData exists before parsing
• Use optional chaining: data?.types?.[0]?.type?.name
• Log the data structure to understand the format

Empty displays:

• Ensure you're calling the display functions
• Check that JSON parsing extracts the right data
• Verify CSS classes are applied correctly

🎨 Features Included

User Interface

• Modern design with gradients and animations
• Responsive layout for all device sizes
• Loading animations with Pokemon-themed spinners
• Type-based coloring matching official Pokemon colors

Data Processing

• Smart error handling for API failures
• Fallback data for offline practice
• JSON formatting for educational purposes
• Performance optimization with Promise.all()

Educational Tools

• Progressive difficulty from basic to advanced
• Clear TODO structure with detailed comments
• Helper functions to focus on JSON parsing
• Real-world API with complex data structures

🏆 Success Criteria

Your project is complete when:

• ✅ All 8 TODO functions are implemented
• ✅ Search works with any valid Pokemon name
• ✅ JSON parsing buttons extract correct data
• ✅ Advanced features (comparison, team) function properly
• ✅ Error handling is graceful and informative
• ✅ Code is clean with appropriate comments

🚀 Extensions & Challenges

Beginner Extensions

• Pokemon favorites: Save favorite Pokemon to localStorage
• Search history: Track recently searched Pokemon
• Pokemon facts: Add interesting facts about each Pokemon

Intermediate Extensions

• Evolution chain: Show Pokemon evolution relationships
• Type effectiveness: Display type advantages/disadvantages
• Move details: Fetch detailed information about specific moves

Advanced Extensions

• Pokemon battles: Simulate battles based on stats
• Regional variants: Handle Alolan/Galarian forms
• Team optimization: Suggest balanced team compositions

Creative Extensions

• Pokemon quiz: Guess Pokemon from silhouettes
• Pokedex mode: Browse Pokemon by region/generation
• AR integration: Use device camera for "catching" Pokemon

📚 Learning Resources

JSON & APIs

• JSON Introduction
• Fetch API Guide
• Pokemon API Documentation

JavaScript Concepts

• Destructuring: const { name, id } = pokemon;
• Array Methods: map(), filter(), slice()
• Async Programming: async/await, Promise.all()
• Optional Chaining: pokemon?.sprites?.front_default

Debugging Tools

• Browser DevTools: Network tab for API inspection
• Console Methods: console.log(), console.table()
• JSON Viewers: Online tools for formatting JSON

🎉 Congratulations!

Upon completion, you'll have mastered:

• Complex JSON parsing with nested data structures
• Professional API integration patterns
• Asynchronous JavaScript with multiple API calls
• Data processing and display techniques
• Error handling and user experience best practices

This foundation prepares you perfectly for the next activity where we'll explore API authentication and work with multiple APIs simultaneously!

Need Help?

• Start with the simplest TODO (1) and work your way up
• Use console.log() liberally to inspect data structures
• Check the Network tab in DevTools to see API responses
• The helper functions show you the expected output format

Remember: The Pokemon API is free, fast, and doesn't require authentication - perfect for learning! 🎯⚡