☰

OpenWeatherMap JSON Formatter (table)

Improve the readability of JSON data from OpenWeatherMap API

// ==UserScript==
// @name         OpenWeatherMap JSON Formatter (table)
// @namespace    http://tampermonkey.net/
// @version      1.9
// @description  Improve the readability of JSON data from OpenWeatherMap API
// @author       chaoscreater
// @match        https://api.openweathermap.org/data/2.5/forecast?q=*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to parse JSON from the <pre> tag
    function parseJSONFromPreTag() {
        const preTag = document.querySelector('pre');
        if (preTag) {
            return JSON.parse(preTag.innerText);
        }
        return null;
    }

    // Function to convert temperature from Kelvin to Celsius
    function kelvinToCelsius(kelvin) {
        return kelvin - 273.15;
    }

    // Function to create a table from JSON data
    function createTableFromJSON(jsonData) {
        let table = '<table border="1" style="border-collapse: collapse; width: 62%;">';
        table += '<tr><th>Date and Time</th><th>Weather</th><th>Probability of Precipitation (%)</th><th>Temperature (°C)</th><th>Cloudiness (%)</th><th>Wind Speed (m/s)</th></tr>';

        jsonData.list.forEach(item => {
            table += `<tr>
                        <td>${item.dt_txt}</td>
                        <td>${item.weather.map(w => w.main).join(', ')}</td>
                        <td>${(parseFloat(item.pop) * 100).toFixed(2)} %</td> <!-- Updated this line -->
                        <td>${kelvinToCelsius(item.main.temp).toFixed(2)} C</td>
                        <td>${item.clouds.all} %</td>
                        <td>${item.wind.speed} m/s</td>
                      </tr>`;
        });

        table += '</table>';
        return table;
    }


    // Parse the JSON data
    const jsonData = parseJSONFromPreTag();

    // Check if jsonData is valid and has a list array
    if (jsonData && jsonData.list) {
        // Create a table from JSON data
        const tableHTML = createTableFromJSON(jsonData);

        // Create a new container for the table
        const container = document.createElement('div');
        container.innerHTML = tableHTML;

        // Replace the <pre> tag with the new table
        const preTag = document.querySelector('pre');
        if (preTag) {
            preTag.parentNode.replaceChild(container, preTag);
        }
    }
})();