Radix Tree - Real-time API Lazy Loading Examples

🐙 GitHub API Integration

Browse GitHub repositories, followers, and repository contents in real-time using the GitHub API. Demonstrates pagination, error handling, and dynamic data mapping.

Username:

Loading GitHub data...

// GitHub API Lazy Loader
function githubLazyLoad(node, done, opts, delay) {
  const page = opts && opts.page ? opts.page : 1;
  const perPage = opts && opts.pageSize ? opts.pageSize : 10;
  
  let endpoint = '';
  if (node.label === 'Repositories') {
    endpoint = `https://api.github.com/users/${node.username}/repos?page=${page}&per_page=${perPage}`;
  } else if (node.label === 'Followers') {
    endpoint = `https://api.github.com/users/${node.username}/followers?page=${page}&per_page=${perPage}`;
  } else if (node.label === 'Following') {
    endpoint = `https://api.github.com/users/${node.username}/following?page=${page}&per_page=${perPage}`;
  } else if (node.repoName) {
    endpoint = `https://api.github.com/repos/${node.username}/${node.repoName}/contents?page=${page}&per_page=${perPage}`;
  }
  
  if (endpoint) {
    fetch(endpoint)
      .then(response => {
        if (!response.ok) throw new Error('API limit exceeded or user not found');
        return response.json();
      })
      .then(data => {
        const children = data.map(item => {
          if (item.type === 'dir') {
            return {
              label: item.name,
              lazy: true,
              repoName: node.repoName || item.name,
              username: node.username,
              badge: '📁',
              tags: ['directory']
            };
          } else if (item.type === 'file') {
            return {
              label: item.name,
              badge: '📄',
              tags: [item.name.split('.').pop() || 'file'],
              id: item.sha
            };
          } else {
            return {
              label: item.login || item.name || item.full_name,
              badge: item.public_repos || item.followers || '👤',
              tags: item.type === 'User' ? ['user'] : ['repo'],
              id: item.id
            };
          }
        });
        done(children, data.length === perPage);
      })
      .catch(error => {
        console.warn('GitHub API Error:', error.message);
        done([{ label: 'Mock Repository 1', badge: '⭐', tags: ['repo'], id: 1 }], false);
      });
  }
}
                

📊 JSONPlaceholder API Integration

Load users, posts, comments, and albums from the JSONPlaceholder API with client-side pagination. Shows how to handle large datasets efficiently.

Ready to load JSONPlaceholder data...

// JSONPlaceholder API Lazy Loader
function jsonPlaceholderLazyLoad(node, done, opts, delay) {
  const page = opts && opts.page ? opts.page : 1;
  const pageSize = opts && opts.pageSize ? opts.pageSize : 10;
  const start = (page - 1) * pageSize;
  
  let endpoint = '';
  if (node.label === 'Users') {
    endpoint = 'https://jsonplaceholder.typicode.com/users';
  } else if (node.label === 'Posts') {
    endpoint = 'https://jsonplaceholder.typicode.com/posts';
  } else if (node.label === 'Comments') {
    endpoint = 'https://jsonplaceholder.typicode.com/comments';
  } else if (node.label === 'Albums') {
    endpoint = 'https://jsonplaceholder.typicode.com/albums';
  } else if (node.userId) {
    endpoint = `https://jsonplaceholder.typicode.com/posts?userId=${node.userId}`;
  }
  
  if (endpoint) {
    fetch(endpoint)
      .then(response => response.json())
      .then(data => {
        const paginatedData = data.slice(start, start + pageSize);
        const children = paginatedData.map(item => {
          if (item.title) {
            return {
              label: item.title.substring(0, 30) + (item.title.length > 30 ? '...' : ''),
              badge: item.id,
              tags: ['post'],
              id: item.id,
              userId: item.userId
            };
          } else if (item.name) {
            return {
              label: item.name,
              badge: item.id,
              tags: ['user'],
              id: item.id,
              email: item.email
            };
          } else {
            return {
              label: item.name || item.title || `Item ${item.id}`,
              badge: item.id,
              tags: ['item'],
              id: item.id
            };
          }
        });
        done(children, start + pageSize < data.length);
      })
      .catch(error => {
        console.warn('JSONPlaceholder API Error:', error.message);
        done([{ label: 'Mock Post 1', badge: 1, tags: ['post'], id: 1 }], false);
      });
  }
}
                

📁 File System API Integration

Browse a mock file system structure with directories, files, and file sizes. Demonstrates how to handle hierarchical file data with lazy loading.

Ready to load file system...

// File System API Lazy Loader (Mock)
function fileSystemLazyLoad(node, done, opts, delay) {
  const page = opts && opts.page ? opts.page : 1;
  const pageSize = opts && opts.pageSize ? opts.pageSize : 10;
  
  // Simulate file system structure
  const mockFileSystem = {
    'Documents': [
      { name: 'report.pdf', type: 'file', size: '2.3MB', id: 1 },
      { name: 'presentation.pptx', type: 'file', size: '5.1MB', id: 2 },
      { name: 'spreadsheet.xlsx', type: 'file', size: '1.8MB', id: 3 },
      { name: 'Projects', type: 'dir', id: 4 },
      { name: 'Archive', type: 'dir', id: 5 }
    ],
    'Pictures': [
      { name: 'vacation.jpg', type: 'file', size: '3.2MB', id: 6 },
      { name: 'family.png', type: 'file', size: '1.5MB', id: 7 },
      { name: 'Screenshots', type: 'dir', id: 8 }
    ],
    'Music': [
      { name: 'playlist.mp3', type: 'file', size: '8.7MB', id: 9 },
      { name: 'album.flac', type: 'file', size: '45.2MB', id: 10 }
    ]
  };
  
  setTimeout(() => {
    let data = [];
    if (node.label === 'Documents' || node.label === 'Pictures' || node.label === 'Music') {
      data = mockFileSystem[node.label] || [];
    } else if (node.label === 'Projects') {
      data = [
        { name: 'web-app', type: 'dir', id: 11 },
        { name: 'mobile-app', type: 'dir', id: 12 },
        { name: 'api-backend', type: 'dir', id: 13 }
      ];
    } else if (node.label === 'Archive') {
      data = [
        { name: 'old-docs.zip', type: 'file', size: '12.5MB', id: 14 },
        { name: 'backup.tar.gz', type: 'file', size: '89.3MB', id: 15 }
      ];
    } else if (node.label === 'Screenshots') {
      data = [
        { name: 'screenshot-2024-01.png', type: 'file', size: '2.1MB', id: 16 },
        { name: 'screenshot-2024-02.png', type: 'file', size: '1.9MB', id: 17 }
      ];
    } else {
      data = [
        { name: 'index.html', type: 'file', size: '15KB', id: 18 },
        { name: 'style.css', type: 'file', size: '8KB', id: 19 },
        { name: 'script.js', type: 'file', size: '25KB', id: 20 }
      ];
    }
    
    const start = (page - 1) * pageSize;
    const paginatedData = data.slice(start, start + pageSize);
    
    const children = paginatedData.map(item => ({
      label: item.name,
      badge: item.type === 'dir' ? '📁' : item.size || '📄',
      tags: item.type === 'dir' ? ['directory'] : [item.name.split('.').pop() || 'file'],
      id: item.id,
      lazy: item.type === 'dir'
    }));
    
    done(children, start + pageSize < data.length);
  }, delay);
}
                

🌤️ Weather API Integration

Browse weather data by countries and cities using a mock weather API. Shows how to handle nested API calls and data transformation.

Country:

Ready to load weather data...

// Weather API Lazy Loader (Mock)
function weatherLazyLoad(node, done, opts, delay) {
  const page = opts && opts.page ? opts.page : 1;
  const pageSize = opts && opts.pageSize ? opts.pageSize : 10;
  
  // Mock weather data
  const mockWeatherData = {
    'United States': [
      { name: 'New York', type: 'city', id: 1 },
      { name: 'Los Angeles', type: 'city', id: 2 },
      { name: 'Chicago', type: 'city', id: 3 },
      { name: 'Houston', type: 'city', id: 4 },
      { name: 'Phoenix', type: 'city', id: 5 }
    ],
    'United Kingdom': [
      { name: 'London', type: 'city', id: 6 },
      { name: 'Manchester', type: 'city', id: 7 },
      { name: 'Birmingham', type: 'city', id: 8 },
      { name: 'Liverpool', type: 'city', id: 9 }
    ],
    'Canada': [
      { name: 'Toronto', type: 'city', id: 10 },
      { name: 'Vancouver', type: 'city', id: 11 },
      { name: 'Montreal', type: 'city', id: 12 }
    ]
  };
  
  setTimeout(() => {
    let data = [];
    
    if (node.label === 'Countries') {
      data = Object.keys(mockWeatherData).map((country, index) => ({
        name: country,
        type: 'country',
        id: index + 100
      }));
    } else if (mockWeatherData[node.label]) {
      data = mockWeatherData[node.label];
    } else if (node.type === 'city') {
      const conditions = ['☀️ Sunny', '🌧️ Rainy', '⛅ Partly Cloudy', '❄️ Snowy', '🌤️ Cloudy'];
      const temperatures = ['22°C', '18°C', '25°C', '15°C', '20°C'];
      
      data = [
        { name: 'Current Weather', type: 'weather', condition: conditions[Math.floor(Math.random() * conditions.length)], temp: temperatures[Math.floor(Math.random() * temperatures.length)], id: node.id * 1000 + 1 },
        { name: 'Forecast (3 days)', type: 'forecast', id: node.id * 1000 + 2 },
        { name: 'Historical Data', type: 'history', id: node.id * 1000 + 3 }
      ];
    } else if (node.label === 'Forecast (3 days)') {
      data = [
        { name: 'Day 1: ☀️ 24°C', type: 'forecast-day', id: node.id * 10 + 1 },
        { name: 'Day 2: 🌧️ 19°C', type: 'forecast-day', id: node.id * 10 + 2 },
        { name: 'Day 3: ⛅ 22°C', type: 'forecast-day', id: node.id * 10 + 3 }
      ];
    }
    
    const start = (page - 1) * pageSize;
    const paginatedData = data.slice(start, start + pageSize);
    
    const children = paginatedData.map(item => ({
      label: item.name,
      badge: item.type === 'weather' ? item.temp : (item.type === 'forecast-day' ? '📅' : '🌍'),
      tags: [item.type],
      id: item.id,
      lazy: item.type === 'country' || item.type === 'city' || item.type === 'forecast'
    }));
    
    done(children, start + pageSize < data.length);
  }, delay);
}
                

🌐 Real-time API Lazy Loading Examples