Charity API Lookup
https://cdn.tailwindcss.com
body {
font-family: ‘Inter’, sans-serif;
}
Charity Organization Lookup
Enter EIN (Employer Identification Number):
Enter API Key (Optional, if required by Charity API):
Lookup Organization
document.addEventListener(‘DOMContentLoaded’, () => {
const einInput = document.getElementById(‘einInput’);
const apiKeyInput = document.getElementById(‘apiKeyInput’);
const lookupButton = document.getElementById(‘lookupButton’);
const apiResponsePre = document.getElementById(‘apiResponse’);
const messageBox = document.getElementById(‘messageBox’);
const messageText = document.getElementById(‘messageText’);
// Function to display messages in the message box
function showMessage(message, type = ‘info’) {
messageText.textContent = message;
messageBox.classList.remove(‘hidden’, ‘bg-red-100’, ‘text-red-800’, ‘bg-green-100’, ‘text-green-800’, ‘bg-blue-100’, ‘text-blue-800’);
if (type === ‘error’) {
messageBox.classList.add(‘bg-red-100’, ‘text-red-800’);
} else if (type === ‘success’) {
messageBox.classList.add(‘bg-green-100’, ‘text-green-800’);
} else {
messageBox.classList.add(‘bg-blue-100’, ‘text-blue-800’);
}
messageBox.classList.remove(‘hidden’);
}
// Function to hide the message box
function hideMessage() {
messageBox.classList.add(‘hidden’);
}
lookupButton.addEventListener(‘click’, async () => {
console.log(‘Lookup button clicked!’); // Confirm button click
const ein = einInput.value.trim();
const apiKey = apiKeyInput.value.trim();
hideMessage();
apiResponsePre.textContent = ‘Loading…’;
if (!ein) {
apiResponsePre.textContent = ”;
showMessage(‘Please enter an EIN.’, ‘error’);
return;
}
const apiUrl = `https://api.charityapi.org/api/organizations/${ein}`;
const requestHeaders = {
‘Content-Type’: ‘application/json’
};
// IMPORTANT: Check Charity API documentation for correct API key header/parameter
// Common formats:
// 1. Authorization: Bearer YOUR_API_KEY (used below)
// 2. X-API-Key: YOUR_API_KEY
// 3. API key as a query parameter:
https://api.charityapi.org/api/organizations/${ein}?apiKey=${apiKey}
if (apiKey) {
requestHeaders[‘Authorization’] = `Bearer ${apiKey}`;
// If Charity API uses a different header, change ‘Authorization’ to that header name.
// For example: requestHeaders[‘X-Api-Key’] = apiKey;
}
const timeout = 10000; // 10 seconds timeout
try {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
const response = await fetch(apiUrl, {
method: ‘GET’,
headers: requestHeaders,
signal: controller.signal // Link the AbortController to the fetch request
});
clearTimeout(id); // Clear the timeout if fetch completes within time
console.log(‘Fetch Response Object:’, response); // Log the full response object
if (!response.ok) {
let errorDetails = ”;
const contentType = response.headers.get(‘content-type’);
// Try to parse error body as JSON first, then as text
if (contentType && contentType.includes(‘application/json’)) {
try {
const errorData = await response.json();
errorDetails = JSON.stringify(errorData, null, 2);
} catch (e) {
console.warn(‘Could not parse error response as JSON, trying as text:’, e);
errorDetails = await response.text();
}
} else {
errorDetails = await response.text();
}
console.error(‘API Error Response (Status Code):’, response.status);
console.error(‘API Error Response (Text/Details):’, errorDetails);
throw new Error(`HTTP Error! Status: ${response.status} (${response.statusText}). Details: ${errorDetails || ‘No additional details.’}`);
}
const data = await response.json();
console.log(‘API Success Response Data:’, data);
apiResponsePre.textContent = JSON.stringify(data, null, 2);
showMessage(‘Organization data fetched successfully!’, ‘success’);
} catch (error) {
apiResponsePre.textContent = ‘Error fetching data.’;
console.error(‘Fetch operation failed:’, error); // Log the entire error object
let displayMessage = `Failed to lookup organization: ${error.message}`;
if (error.name === ‘AbortError’) {
displayMessage = “Request timed out. The API did not respond within 10 seconds.”;
} else if (error instanceof TypeError && error.message === ‘Failed to fetch’) {
displayMessage = “Network error or potential CORS issue. Please check your browser’s console for ‘Cross-Origin’ errors in the Network tab.”;
} else if (error.message.includes(“HTTP Error! Status: 401”)) {
displayMessage = “Authentication failed (401 Unauthorized). Please double-check your API key and its required format.”;
} else if (error.message.includes(“HTTP Error! Status: 403”)) {
displayMessage = “Forbidden (403). Access denied. Verify API key, permissions, or rate limits.”;
} else if (error.message.includes(“HTTP Error! Status: 404”)) {
displayMessage = “Organization not found (404). Please verify the EIN is correct.”;
} else if (error.message.includes(“HTTP Error! Status: 500”)) {
displayMessage = “Server error (500). The Charity API might be experiencing issues.”;
}
showMessage(displayMessage, ‘error’);
}
});
});
Leave a Comment so far
Leave a comment
Chris Minerd 