JavaScript (Browser)

You can use the native fetch API in modern web browsers to interact with the Rowlogy API. This is useful for building custom frontend experiences or simple integrations directly into static or dynamic web pages.

Authentication

API requests from a browser must be authenticated using an API key. Include your API key in the Authorization header.

Authorization: Bearer <YOUR_API_KEY>

Important Security Note: Exposing API keys directly in client-side JavaScript is generally not recommended for applications where the source code is publicly visible, as it can lead to your API key being compromised. For such scenarios, consider:

Using a backend proxy: Your frontend makes requests to your own backend, which then securely adds the API key and forwards the request to the Rowlogy API.
If the Rowlogy platform supports them, use restricted API keys that only have read-only access or access to specific public projects.

Always obtain your API key from your profile page and manage its permissions carefully. It’s best practice to use environment variables for API keys during development and build processes, and use a backend proxy for public-facing applications.

Examples

These examples assume you are running JavaScript in a browser environment that supports the fetch API.

1. Get Project Content

This function retrieves the content of a specific project.


<!-- Example HTML structure -->
<div id="project-title"></div>
<ul id="project-items"></ul>
 
<script>
    const ROWLOGY_API_KEY = "YOUR_API_KEY"; // Replace with your actual key or use a proxy
    const PROJECT_ID = "your-project-id";
 
    async function fetchProjectContent(projectId) {
        const url = `https://rowlogy.com/api/project/${projectId}/content`; // Adjust if your API is hosted elsewhere
 
        try {
            const response = await fetch(url, {
                method: "GET",
                headers: {
                    Authorization: `Bearer ${ROWLOGY_API_KEY}`,
                    "Content-Type": "application/json",
                },
            });
 
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
            }
 
            const data = await response.json();
            console.log("Project Content:", data);
 
            // Example: Displaying data on the page
            document.getElementById("project-title").textContent = data.title || "Project Data";
            const itemsList = document.getElementById("project-items");
            itemsList.innerHTML = ""; // Clear previous items
            if (data.items && Array.isArray(data.items)) {
                data.items.forEach((item) => {
                    const listItem = document.createElement("li");
                    listItem.textContent = item.name || JSON.stringify(item); // Adjust based on your data structure
                    itemsList.appendChild(listItem);
                });
            }
            return data;
        } catch (error) {
            console.error("Error retrieving project content:", error);
            document.getElementById("project-title").textContent = "Failed to load project data.";
            throw error;
        }
    }
 
    // Call the function on page load or an event
    // fetchProjectContent(PROJECT_ID);
</script>

2. Update Project Content

This function updates the content of a specific project. Be extra cautious with this on the client-side due to security implications.


<script>
    // (Continuing from the previous script block)
 
    async function updateProjectContent(projectId, newContent) {
        const url = `https://rowlogy.com/api/project/${projectId}/content`; // Adjust if your API is hosted elsewhere
 
        try {
            const response = await fetch(url, {
                method: "POST",
                headers: {
                    Authorization: `Bearer ${ROWLOGY_API_KEY}`,
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(newContent),
            });
 
            if (!response.ok) {
                // Try to get more error details from the response body
                let errorDetails = response.statusText;
                try {
                    const errorData = await response.json();
                    errorDetails = errorData.message || errorData.error || JSON.stringify(errorData);
                } catch (e) {
                    // Ignore if response body is not JSON
                }
                throw new Error(`HTTP error! status: ${response.status} - ${errorDetails}`);
            }
 
            const result = await response.json();
            console.log("Project Content Update Result:", result);
            alert("Project updated successfully!"); // Simple feedback
            return result;
        } catch (error) {
            console.error("Error updating project content:", error);
            alert(`Failed to update project: ${error.message}`);
            throw error;
        }
    }
 
    // Example usage:
    /*
    const sampleContentToUpdate = {
        title: "My Awesome Project (Updated from Browser)",
        description: "This content was updated using JavaScript in the browser.",
        items: [
            { id: 1, name: "Updated Item 1" },
            { id: 2, name: "Updated Item 2" }
        ]
    };
    // updateProjectContent(PROJECT_ID, sampleContentToUpdate);
    */
</script>

CORS Considerations

When making requests from a browser to a different domain (like the Rowlogy API from your website), Cross-Origin Resource Sharing (CORS) policies are enforced by the browser. The Rowlogy API server must be configured to send appropriate CORS headers (e.g., Access-Control-Allow-Origin) to allow requests from your website’s domain.

If you encounter CORS errors, it means the API is not configured to accept requests from your origin. In such cases, using a backend proxy is a common solution.

Remember to replace placeholder values like YOUR_API_KEY, your-rowlogy-username, your-project-id, and API URLs with your actual data.