status.json Documentation

Guide for Loading and Displaying App Status Data from status.json

Introduction

The status.json file, located at https://block-core.github.io/status/status.json, contains real-time status information for various apps and their associated services, indexers, and relays. This documentation explains how to load, parse, and display this data.

File Structure

The status.json file has the following structure:

{
    "Angor": [
        {
            "name": "hub.angor.io",
            "url": "https://hub.angor.io",
            "type": "service",
            "isActive": true,
            "timestamp": "2023-10-24T12:00:00Z"
        },
        ...
    ],
    "Ariton": [
        ...
    ],
    "Blockcore": [
        ...
    ]
}

Loading the status.json File

To load and parse the status.json file, use the Fetch API in JavaScript as shown below:

async function loadStatusData() {
    try {
        const response = await fetch('https://block-core.github.io/status/status.json');
        const statusData = await response.json();
        console.log(statusData);
    } catch (error) {
        console.error('Error loading status.json:', error);
    }
}

Displaying All App Statuses

To display all app statuses, iterate through the JSON data and render each service as shown:

function displayAllStatus(data) {
    const container = document.getElementById('statusContainer');
    Object.keys(data).forEach(appName => {
        const appSection = document.createElement('div');
        appSection.classList.add('app-section');
        appSection.innerHTML = `<h3>${appName}</h3>`;

        data[appName].forEach(service => {
            appSection.innerHTML += `
                <div class="service-info">
                    <strong>${service.name}</strong> (${service.type})<br>
                    URL: <a href="${service.url}" target="_blank">${service.url}</a><br>
                    Status: ${service.isActive ? "Active" : "Inactive"}
                </div>
            `;
        });

        container.appendChild(appSection);
    });
}

Displaying Status for a Specific App

To display status for a single app (e.g., "Angor"), filter the JSON data by app name:

function displayAppStatus(data, appName) {
    const container = document.getElementById('statusContainer');
    container.innerHTML = ''; // Clear previous content

    if (!data[appName]) {
        container.innerHTML = `App "${appName}" not found.`;
        return;
    }

    const appSection = document.createElement('div');
    appSection.classList.add('app-section');
    appSection.innerHTML = `${appName}`;

    data[appName].forEach(service => {
        appSection.innerHTML += `
            <div class="service-info">
                <strong>${service.name}</strong> (${service.type})<br>
                URL: <a href="${service.url}" target="_blank">${service.url}</a><br>
                Status: ${service.isActive ? "Active" : "Inactive"}
            </div>
        `;
    });

    container.appendChild(appSection);
}

Example Usage

Below is an example of how to use these functions to display the data dynamically on a web page:

<body>
    <div id="statusContainer"></div>
    <script>
        loadStatusData().then(data => {
            displayAllStatus(data); // To display all apps
            // Or, to display a specific app:
            // displayAppStatus(data, 'Angor');
        });
    </script>
</body>