如何通过前端JavaScript函数调用API获取Intrinio苹果财报并点击展示？

Got it, let's turn your Node.js script into a browser-friendly solution that triggers on a button click and displays data directly on an HTML page. Here's a complete, ready-to-use implementation:

Full HTML + JavaScript Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Apple Financial Data from Intrinio</title>
    <style>
        .results { margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
        .data-row { margin: 10px 0; padding: 8px; background: #f5f5f5; border-radius: 3px; }
        .loading { color: #666; font-style: italic; }
        .error { color: #dc3545; }
    </style>
</head>
<body>
    <button id="fetchBtn">Fetch Apple Financial Data</button>
    <div id="results" class="results"></div>

    <script>
        // Replace with your Intrinio API key
        const INTRINIO_KEY = 'YOUR_API_KEY_HERE';
        const APPLE_TICKER = 'AAPL';

        async function getAppleFinancials() {
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<p class="loading">Loading data...</p>';

            try {
                // Fetch standardized income statement data (adjust endpoint for other data types)
                const response = await fetch(
                    `https://api.intrinio.com/financials/standardized?ticker=${APPLE_TICKER}&statement=income_statement&fiscal_year=2023`,
                    { headers: { 'Authorization': `Bearer ${INTRINIO_KEY}` } }
                );

                if (!response.ok) throw new Error(`Request failed: ${response.statusText}`);
                
                const data = await response.json();
                renderData(data, resultsDiv);

            } catch (err) {
                resultsDiv.innerHTML = `<p class="error">Oops! ${err.message}</p>`;
                console.error('Fetch error:', err);
            }
        }

        function renderData(apiData, container) {
            if (!apiData?.financials?.length) {
                container.innerHTML = '<p>No financial data found for Apple.</p>';
                return;
            }

            let html = '<h3>Apple (AAPL) 2023 Income Statement</h3>';
            apiData.financials.forEach(item => {
                html += `
                    <div class="data-row">
                        <strong>${item.label}:</strong> $${item.value.toLocaleString()}
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        // Attach click handler to the button
        document.getElementById('fetchBtn').addEventListener('click', getAppleFinancials);
    </script>
</body>
</html>

Important Details to Know: #

• API Key Security: Replace YOUR_API_KEY_HERE with your actual Intrinio key. Note that exposing API keys in client-side code is risky for public sites—if this is going live, use a backend proxy (like a simple Node.js Express server) to forward the request instead of calling Intrinio directly from the browser.
• CORS Fix: If you hit CORS errors, Intrinio likely blocks direct browser requests. The proxy workaround mentioned above will solve this.
• Customize Data: Adjust the API endpoint parameters (statement, fiscal_year, etc.) to pull balance sheet, cash flow, or other financial metrics instead of the income statement.
• Error Handling: The code includes basic error handling for failed requests and missing data—you can expand this to handle edge cases specific to your needs.

Just save this as an HTML file, plug in your API key, and open it in a browser. Click the button to see Apple's financial data displayed neatly on the page!

内容的提问来源于stack exchange，提问作者Rajath Savanth