JavaScript Examples

JavaScript Examples

This page provides examples of how to use the AutoElite API with JavaScript/TypeScript.

Setup

First, create a client class to handle API requests:

class AutoEliteClient {
  constructor(apiKey, baseUrl = 'https://api.autoelite.io') {
    this.apiKey = apiKey;
    this.baseUrl = baseUrl;
  }

  async request(endpoint, options = {}) {
    const url = `${this.baseUrl}${endpoint}`;
    
    const headers = {
      'Content-Type': 'application/json',
      'X-API-Key': this.apiKey,
      ...options.headers
    };
    
    const config = {
      ...options,
      headers
    };
    
    const response = await fetch(url, config);
    
    // Handle errors
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error || `API Error: ${response.status}`);
    }
    
    // Return the data
    return await response.json();
  }
  
  // Vehicles
  async getVehicles(params = {}) {
    const queryString = new URLSearchParams(params).toString();
    return this.request(`/api/vehicles${queryString ? `?${queryString}` : ''}`);
  }
  
  async getVehicle(id) {
    return this.request(`/api/vehicles/${id}`);
  }
  
  async createVehicle(data) {
    return this.request('/api/vehicles', {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
  
  async updateVehicle(id, data) {
    return this.request(`/api/vehicles/${id}`, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
  }
  
  async deleteVehicle(id) {
    return this.request(`/api/vehicles/${id}`, {
      method: 'DELETE'
    });
  }
  
  // Vehicle Images
  async getVehicleImages(vehicleId) {
    return this.request(`/api/vehicles/${vehicleId}/images`);
  }
  
  async addVehicleImage(vehicleId, data) {
    return this.request(`/api/vehicles/${vehicleId}/images`, {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
  
  // Dealers
  async getDealers() {
    return this.request('/api/dealers');
  }
  
  async getDealer(id) {
    return this.request(`/api/dealers/${id}`);
  }
  
  // API Keys
  async getApiKeys() {
    return this.request('/api/api-keys');
  }
  
  async createApiKey(data) {
    return this.request('/api/api-keys', {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
  
  async updateApiKey(id, data) {
    return this.request(`/api/api-keys/${id}`, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
  }
  
  async revokeApiKey(id) {
    return this.request(`/api/api-keys/${id}`, {
      method: 'DELETE'
    });
  }
}

Usage Examples

Initialize the Client

const client = new AutoEliteClient('your-api-key-here');

Get All Vehicles

async function getAllVehicles() {
  try {
    const vehicles = await client.getVehicles();
    console.log('Vehicles:', vehicles);
    return vehicles;
  } catch (error) {
    console.error('Error fetching vehicles:', error);
  }
}

Get Vehicles with Filtering

async function getAvailableVehicles() {
  try {
    const vehicles = await client.getVehicles({
      status: 'available',
      limit: 10,
      offset: 0
    });
    console.log('Available vehicles:', vehicles);
    return vehicles;
  } catch (error) {
    console.error('Error fetching vehicles:', error);
  }
}

Get a Specific Vehicle

async function getVehicleById(id) {
  try {
    const vehicle = await client.getVehicle(id);
    console.log('Vehicle details:', vehicle);
    return vehicle;
  } catch (error) {
    console.error(`Error fetching vehicle ${id}:`, error);
  }
}

Create a Vehicle

async function createNewVehicle() {
  try {
    const vehicleData = {
      title: '2023 Toyota Camry',
      make: 'Toyota',
      model: 'Camry',
      year: 2023,
      price: 25000,
      dealer_id: 123, // Not needed if using a dealer-specific API key
      mileage: 15000,
      exterior_color: 'Blue',
      interior_color: 'Black',
      vin: '1HGBH41JXMN109186',
      stock_number: 'T12345',
      status: 'available'
    };
    
    const newVehicle = await client.createVehicle(vehicleData);
    console.log('Created vehicle:', newVehicle);
    return newVehicle;
  } catch (error) {
    console.error('Error creating vehicle:', error);
  }
}

Update a Vehicle

async function updateVehiclePrice(id, newPrice) {
  try {
    const updatedVehicle = await client.updateVehicle(id, {
      price: newPrice
    });
    console.log('Updated vehicle:', updatedVehicle);
    return updatedVehicle;
  } catch (error) {
    console.error(`Error updating vehicle ${id}:`, error);
  }
}

Delete a Vehicle

async function deleteVehicle(id) {
  try {
    const result = await client.deleteVehicle(id);
    console.log('Delete result:', result);
    return result;
  } catch (error) {
    console.error(`Error deleting vehicle ${id}:`, error);
  }
}

Get Vehicle Images

async function getVehicleImages(vehicleId) {
  try {
    const images = await client.getVehicleImages(vehicleId);
    console.log('Vehicle images:', images);
    return images;
  } catch (error) {
    console.error(`Error fetching images for vehicle ${vehicleId}:`, error);
  }
}

Add a Vehicle Image

async function addVehicleImage(vehicleId, imageUrl) {
  try {
    const imageData = {
      image_url: imageUrl,
      is_primary: false
    };
    
    const newImage = await client.addVehicleImage(vehicleId, imageData);
    console.log('Added image:', newImage);
    return newImage;
  } catch (error) {
    console.error(`Error adding image to vehicle ${vehicleId}:`, error);
  }
}

Error Handling

async function fetchWithErrorHandling() {
  try {
    const vehicles = await client.getVehicles();
    return vehicles;
  } catch (error) {
    if (error.message.includes('401')) {
      console.error('Authentication error. Please check your API key.');
      // Handle authentication error (e.g., redirect to login)
    } else if (error.message.includes('403')) {
      console.error('Permission denied. Your API key does not have access to this resource.');
      // Handle permission error
    } else if (error.message.includes('404')) {
      console.error('Resource not found.');
      // Handle not found error
    } else if (error.message.includes('429')) {
      console.error('Rate limit exceeded. Please try again later.');
      // Implement exponential backoff
    } else {
      console.error('An unexpected error occurred:', error);
      // Handle other errors
    }
  }
}

Using with React

import React, { useState, useEffect } from 'react';

const VehicleList = () => {
  const [vehicles, setVehicles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  const client = new AutoEliteClient('your-api-key-here');
  
  useEffect(() => {
    const fetchVehicles = async () => {
      try {
        setLoading(true);
        const data = await client.getVehicles();
        setVehicles(data);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };
    
    fetchVehicles();
  }, []);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <div>
      <h1>Vehicles</h1>
      <ul>
        {vehicles.map(vehicle => (
          <li key={vehicle.id}>
            {vehicle.year} {vehicle.make} {vehicle.model} - ${vehicle.price}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default VehicleList;

Using with TypeScript

interface Vehicle {
  id: number;
  title: string;
  make: string;
  model: string;
  year: number;
  price: number;
  dealer_id: number;
  status: 'available' | 'pending' | 'sold';
  featured: boolean;
  created_at: string;
  updated_at: string;
  [key: string]: any;
}

interface VehicleImage {
  id: number;
  vehicle_id: number;
  image_url: string;
  is_primary: boolean;
  display_order: number;
  created_at: string;
}

interface Dealer {
  id: number;
  name: string;
  address: string;
  city: string;
  state: string;
  zip: string;
  phone: string;
  email: string;
  website: string;
  created_at: string;
  updated_at: string;
}

class TypedAutoEliteClient {
  private apiKey: string;
  private baseUrl: string;
  
  constructor(apiKey: string, baseUrl: string = 'https://api.autoelite.io') {
    this.apiKey = apiKey;
    this.baseUrl = baseUrl;
  }
  
  private async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
    const url = `${this.baseUrl}${endpoint}`;
    
    const headers = {
      'Content-Type': 'application/json',
      'X-API-Key': this.apiKey,
      ...options.headers
    };
    
    const config = {
      ...options,
      headers
    };
    
    const response = await fetch(url, config);
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error || `API Error: ${response.status}`);
    }
    
    return await response.json() as T;
  }
  
  // Vehicles
  async getVehicles(params: Record<string, string | number> = {}): Promise<Vehicle[]> {
    const queryString = new URLSearchParams();
    
    Object.entries(params).forEach(([key, value]) => {
      queryString.append(key, String(value));
    });
    
    const queryPart = queryString.toString() ? `?${queryString.toString()}` : '';
    return this.request<Vehicle[]>(`/api/vehicles${queryPart}`);
  }
  
  async getVehicle(id: number): Promise<Vehicle> {
    return this.request<Vehicle>(`/api/vehicles/${id}`);
  }
  
  async createVehicle(data: Partial<Vehicle>): Promise<Vehicle> {
    return this.request<Vehicle>('/api/vehicles', {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
  
  async updateVehicle(id: number, data: Partial<Vehicle>): Promise<Vehicle> {
    return this.request<Vehicle>(`/api/vehicles/${id}`, {
      method: 'PUT',
      body: JSON.stringify(data)
    });
  }
  
  async deleteVehicle(id: number): Promise<{ success: boolean; message: string }> {
    return this.request<{ success: boolean; message: string }>(`/api/vehicles/${id}`, {
      method: 'DELETE'
    });
  }
  
  // Vehicle Images
  async getVehicleImages(vehicleId: number): Promise<VehicleImage[]> {
    return this.request<VehicleImage[]>(`/api/vehicles/${vehicleId}/images`);
  }
  
  async addVehicleImage(vehicleId: number, data: Partial<VehicleImage>): Promise<VehicleImage> {
    return this.request<VehicleImage>(`/api/vehicles/${vehicleId}/images`, {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
  
  // Dealers
  async getDealers(): Promise<Dealer[]> {
    return this.request<Dealer[]>('/api/dealers');
  }
  
  async getDealer(id: number): Promise<Dealer> {
    return this.request<Dealer>(`/api/dealers/${id}`);
  }
}

Using with Node.js

const fetch = require('node-fetch');

class NodeAutoEliteClient {
  constructor(apiKey, baseUrl = 'https://api.autoelite.io') {
    this.apiKey = apiKey;
    this.baseUrl = baseUrl;
  }

  async request(endpoint, options = {}) {
    const url = `${this.baseUrl}${endpoint}`;
    
    const headers = {
      'Content-Type': 'application/json',
      'X-API-Key': this.apiKey,
      'X-App-Type': 'desktop', // For Node.js applications
      ...options.headers
    };
    
    const config = {
      ...options,
      headers
    };
    
    const response = await fetch(url, config);
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.error || `API Error: ${response.status}`);
    }
    
    return await response.json();
  }
  
  // Add methods similar to the browser client
}

// Usage
async function main() {
  const client = new NodeAutoEliteClient('your-api-key-here');
  
  try {
    const vehicles = await client.getVehicles();
    console.log('Vehicles:', vehicles);
  } catch (error) {
    console.error('Error:', error);
  }
}

main();