Создать html таблицу из источника URL - PullRequest
Новая
       42

Создать html таблицу из источника URL

2 голосов
/ 22 марта 2020

Это, наверное, самый простой из кодов, но я новичок в этом и мне нужна помощь. Я пытаюсь создать панель управления для моего умного дома через OpenHab2.0. Для этой панели я хотел бы иметь виджет, который показывает мне следующие 5 отправлений от моей трамвайной остановки. схема моей таблицы следующая:

формат таблицы Данные, которые я пытаюсь вставить, находятся по этому 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"},

от «0» до «5» - идентификаторы текущего и следующих пяти отправлений. Однако я не знаю, как получить линию, направление и время в таблице.

Кроме того, мне бы хотелось, чтобы таблица обновлялась каждую минуту автоматически. Есть ли способ программирования этого в HTML? потому что это единственный формат, который принимает строитель виджетов, насколько я знаю.

Спасибо

Ответ 1 PHP: code looks broken

1 Ответ

0 голосов
/ 22 марта 2020 
<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>

Этот код теоретически вытянет первые пять (начиная с 0) и добавит их в виде строк в элемент таблицы. Однако это не сработает, поскольку указанный вами URL-адрес не имеет заголовка Access-Control-Allow-Origin IE, который блокируется CORS.

Если вы владеете этим сервером, вы можете добавить поддержку CORS или попросить владелец сервера, чтобы добавить поддержку CORS для получения этой информации через JavaScript. В противном случае вам придется выполнить запрос на стороне сервера на языке, подобном PHP, где CORS не будет проблемой.

РЕДАКТИРОВАТЬ:

Этот код будет избегайте CORS, используя 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>
...