Create html table from URL source

Question

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:

sundaycode · Answer 1 · 2020-03-22T21:11:22.150

<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>

I'm not the owner of the server sadly... Would it be better from this link? https://www.kvb.koeln/generated/?aktion=show&code=245 — msvdg, Mar 22 '20 at 20:58
@msvdg I think the other link has better formatted data. Are you able to use PHP? I could write some code that will work on a PHP server. — sundaycode, Mar 22 '20 at 21:01
Sadly it looks like its broken.. or am i missing something? I cant get the screenshot in here though.. see my initial comment — msvdg, Mar 22 '20 at 21:13
Yes. but it is not taking; did some more research and apparently PHP is not supported, (sorry about that - very much appreciate your help thus far) and I'd still need the HTML version, and somehow bypass the CORS... Is it at all possible? — msvdg, Mar 22 '20 at 21:30
@msvdg No, unfortunately that is not possible. Your best bet would be to circumvent the endpoint you mentioned earlier by creating your own PHP server, and then get the data from said PHP server. Good luck! — sundaycode, Mar 22 '20 at 21:34

Create html table from URL source

1 Answers1