JavaScript Examples

Here are practical examples of how to use the Regular Show API in JavaScript.

Basic Setup

const API_BASE = 'https://regularshow-api.vercel.app/api';

// Helper function
async function fetchAPI(endpoint) {
  const response = await fetch(`${API_BASE}${endpoint}`);
  return response.json();
}

Get All Characters

async function getAllCharacters() {
  const data = await fetchAPI('/character');
  console.log(`Found ${data.info.count} characters`);
  return data.results;
}

Search Characters

async function searchCharacters(query) {
  const data = await fetchAPI(`/character?name=${encodeURIComponent(query)}`);
  return data.results;
}

// Usage
searchCharacters('Mordecai').then(results => {
  results.forEach(char => console.log(char.name));
});

Get Character by ID

async function getCharacter(idOrSlug) {
  const data = await fetchAPI(`/character/${idOrSlug}`);
  if (data.error) {
    console.error(data.error);
    return null;
  }
  return data;
}

// Usage
getCharacter('Benson').then(char => {
  console.log(`${char.name} is voiced by ${char.info.Voiced_by}`);
});

Filter by Category

async function getVillains() {
  const data = await fetchAPI('/character?category=Villains&limit=50');
  return data.results;
}

Get Episodes by Season

async function getSeasonEpisodes(season) {
  const data = await fetchAPI(`/episode?season=${season}`);
  return data.results;
}

// Usage
getSeasonEpisodes(1).then(episodes => {
  episodes.forEach(ep => {
    console.log(`${ep.episode_number}. ${ep.name}`);
  });
});

Paginated Requests

async function getAllPaginated(endpoint, limit = 20) {
  const allResults = [];
  let page = 1;
  let hasMore = true;
  
  while (hasMore) {
    const data = await fetchAPI(`${endpoint}?page=${page}&limit=${limit}`);
    allResults.push(...data.results);
    
    if (page >= data.info.pages) {
      hasMore = false;
    } else {
      page++;
    }
  }
  
  return allResults;
}

// Usage
getAllPaginated('/character', 50).then(all => {
  console.log(`Fetched ${all.length} characters`);
});

React Example

import { useState, useEffect } from 'react';

function CharacterList() {
  const [characters, setCharacters] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch('https://regularshow-api.vercel.app/api/character?limit=20')
      .then(res => res.json())
      .then(data => {
        setCharacters(data.results);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <div>Loading...</div>;
  
  return (
    <ul>
      {characters.map(char => (
        <li key={char.id}>{char.name}</li>
      ))}
    </ul>
  );
}

Error Handling

async function safeFetch(endpoint) {
  try {
    const response = await fetch(`https://regularshow-api.vercel.app/api${endpoint}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    
    if (data.error) {
      throw new Error(data.error);
    }
    
    return data;
  } catch (error) {
    console.error('Fetch error:', error.message);
    return null;
  }
}