Create html table from URL source

Question

Create html table from URL source

154 Views Asked by msvdg At 20 October 2024 at 08:15

It probably the most simple of codes, but I am very new to this and need some help. I am trying to build a dashboard for my smart home via OpenHab2.0. For this dashboard, I'd like to have a widget that shows me the next 5 departures from my tram stop. the layout of my table is as follows:

table format The data I am trying to insert is found via this URL: https://ayacoo.bellatrix.uberspace.de/kvb/examples/station.php?id=245.

"0":{"line":"5","direction":"Am Butzweilerhof","time":"Sofort"},
"1":{"line":"5","direction":"Heumarkt","time":"6 Min"},
"2":{"line":"13","direction":"Sülzgürtel","time":"8 Min"},
"3":{"line":"13","direction":"Holweide","time":"8 Min"},
"4":{"line":"E","direction":"Melatengürtel","time":"10 Min"},
"5":{"line":"141","direction":"Vogelsang","time":"13 Min"},

the "0" to "5" are the identifiers of the current and next five departures. However, I don't know how to get the line, direction and time into the table.

Also, I would like that the table updates every minute automatically. Is there any way of programming this in HTML? because that's the only format the widget builder accepts as far as I know.

Thanks

Answer 1 PHP:

Original Q&A

There are 1 best solutions below

**sundaycode** · Answer 1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table class="table">

    </table>
    <script>
        let table = document.querySelector('.table')
        fetch(`https://ayacoo.bellatrix.uberspace.de/kvb/examples/station.php?id=245`)
            .then(res => res.json())
            .then(res => {
                for (let index = 0; index < 5; index++) {
                    table.innerHTML += `
                        <tr>
                            <td>${res[index].line}</td>
                            <td>${res[index].direction}</td>
                            <td>${res[index].time}</td>
                        </tr>
                    `
                }
            })
    </script>
</body>
</html>

This code will in theory pull in the first five (starting at 0) and add them as rows to the table element. However, this won't work because the URL you referenced does not have the Access-Control-Allow-Origin header IE is being blocked by CORS.

If you own this server, you can add CORS support, or ask the server owner to add CORS support in order to fetch this information via JavaScript. Otherwise, you will have to make this request server side in a language like PHP where CORS won't be a problem.

EDIT:

This code will avoid CORS by using PHP:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <?php

        $res = file_get_contents('https://ayacoo.bellatrix.uberspace.de/kvb/examples/station.php?id=245');
        $json = json_decode($res);

        for ($i=0; $i < 4; $i++) { 
            echo '<tr>';
            echo '<td>' . $json->$i->line . '</td>';
            echo '<td>' . $json->$i->direction . '</td>';
            echo '<td>' . $json->$i->time . '</td>';
            echo '</tr>';
        }

        ?>

    </table>
</body>
</html>

Create html table from URL source

There are 1 best solutions below

Related Questions in HTML

Related Questions in OPENHAB

Trending Questions

Popular # Hahtags

Popular Questions