Data z JSONu na HTML stránku

od **jakub.michalek** 1. 7. 2019 12:41

Zdravím vás,

provozuji doma jednoduchou meteostanici postavenou na ESP8266, která každých 15 minut odesílá data do Google Tabulky na mém Google disku. Pomocí nástroje GSX2JSON si data z této tabulky převádím do formátu JSON - data v tomto formátu běží v podstatě na další webové stránce: https://bit.ly/2NnezzH. Teď však nastává problém, který bych potřeboval vyřešit: existuje nějaká možnost, jak JSON data z tohoto odkazu zobrazit na webové stránce (jedná se v podstatě o jakýsi dashboard) napsané v HTML tak, aby z toho nebyl guláš v závorkách a mělo to nějakou kulturu? Popravdě, Google jsem prohledal, ale nenašel jsem žádnou rozumnou cestu.

Děkuji za pomoc, JM.

od **JirkaVejrazka** 1. 7. 2019 13:26

Je to trivialni s libovolnym skriptovacim jazykem na strane weboveho serveru. Perl, Python, PHP, Ruby, node.js, ... - staci zjistit, co umi ten server, na kterem chces ta data zobrazit a pak najit navod pro dany jazyk.

od **jakub.michalek** 1. 7. 2019 18:15

Děkuji za odpověď, nicméně... nebyl by nějaký konkrétní příklad? Popravdě, úplně jsem nepochopil ten důraz "zjistit, co daný server umí." Jedná se o klasickou webovou stránku napsanou v HTML (napsanou mou osobou), u které mám pouze jediné přání: přeměnit ten guláš v závorkách z JSONu do něčeho lehce kultivovanějšího ve stylu:

Teplota: XX.XX °C
Vlhkost: XX.XX %
Světlo: XXX lx.

od **Kledr** 1. 7. 2019 20:55

Umi pracovat i primo s google tabulkou...

https://developers.google.com/chart/int ... /linechart

od **Emil Pastelka** 1. 7. 2019 23:44

Tady jsem udělal jednoduchý příklad. Je to celkem popisné.
https://codepen.io/pastelka/pen/GbxxqN

A teď se dívám, že to tam koliduje http/https. Pokud to budete načítat na serveru, který nemá https, upravte zdrojový odkaz v JS na http.

od **jakub.michalek** 2. 7. 2019 12:27

Moc díky za ochotu a za napsání příkladu. Nicméně, zkoušel jsem zaměnit u adresy, odkud načítám JSON data, https za http, ale stále je tam prázdno, i když pod tím externím odkazem nějaké hodnoty jsou (i když ta meteostanice momentálně neběží). Byl by mi někdo schopný poradit, kde je problém? Uvědomuji si, že se asi jedná o lehce stupidní dotazy, nicméně s tímhle jsem si začal hrát docela nedávno. :-[

od **Emil Pastelka** 2. 7. 2019 17:45

Problém bude asi v té části, kde běží vaše HTML. XMLHttpRequest nefunguje na lokálním PC. Předpokládal jsem, že někde online hostujete stránky. Nicméně je možné, že to spouštíte na vlastním PC - toto je třeba říci a popsat hned, kde vlastně to html provozujete.
Pokud by se jednalo o lokální síť bylo by potřeba zvolit jiné řešení. Pokuste se vše popsat co nejpřesněji.

od **jakub.michalek** 2. 7. 2019 22:09

Fajn, je fakt, že jsem to mohl detailněji popsat hned na začátku, což jsem neudělal a omlouvám se, nicméně doplňuji. Všechno se to skládá v podstatě ze dvou zařízení - meteostanice postavené na čipu ESP8266 a Raspberry Pi Zero W, kde mi pod apache2 běží právě ona jednoduchá webová stránka, kde chci zobrazit v nějakém kultivovaném formátu ta data. Meteostanice každých 15 minut změří teplotu, vlhkost a tlak a tyto údaje pomocí Wi-Fi odešle do Google Tabulky na mém Google Disku. Vzhledem k tomu, že jsem v samotných Google Tabulkách nenašel nějaký jednoduchý způsob, jak zdejší data převést do formátu JSON, použil jsem na to právě nástroj GSX2JSON, který tak učiní - jak jsem již uváděl výše, je to na tomto odkazu. No, a data právě z tohoto odkazu chci nějakým rozumným způsobem vypsat na oné jednoduché webové stránce, která mi běží na Raspberry Pi Zero W - o tom jsem psal výše v této odpovědi. Doufám, že to takhle bude stačit, pokud ne, zkusím to nějak více rozvést.

od **Doggg** 3. 7. 2019 05:16

Není nějaký jednodušší způsob jak dostat data z Google sheetu do HTML než json? Jenom jestli se s tím netrapis zbytečně...

od **JirkaVejrazka** 3. 7. 2019 08:37

Muzes si na RPi pustit jednoduchou ulohu, ktera kazdych 5 minut stahne JSON z tveho odkazu, vybere z nej data, ktera te zajimaji a pak to ulozi to jednoducheho HTML souboru na disk. Ten pak muzes pouzit primo, nebo vlozit do sve HTML stranky.

Na RPi je skoro urcite nainstalovany Python. Kdyz mi sem hodis ukazku toho JSON souboru a napises, ktera data te zajimaji, klidne ti to napisu.

EDIT: konecne jsem se podival na ten odkaz s JSON daty - tohle je fakt trivialni. Zjisti, jestli mas na RPi funkcni Python a ozvi se.

od **jakub.michalek** 3. 7. 2019 13:10

Doggg: No, obávám se, že kromě vytvoření iframu celé té tabulky, který bych vložil na tu svou stránku, jednodušší způsob není - resp. na internetu existuje spousta návodů, jak to udělat přes Google Script, problém je v tom, že v Google Scriptu už mám napsaný kód, aby ta tabulka vůbec byla schopná přijímat data z té meteostanice, a když jsem se to ještě snažil nějak smíchat s přepisem do JSONu, tak se to spolu dost pralo a buď fungovalo přijímání dat, nebo JSON, obojí dohromady ne.

JirkaVejrazka: Na RPi samozřejmě Python funkční mám, používám ho k provozu něčeho jako bezpečnostní kamery. Ta možnost stahování dat do HTML souboru na disk zní docela jednoduše, pokud by tedy byla možnost mě nějak nakopnout, byl bych rád. Díky.

od **JirkaVejrazka** 3. 7. 2019 14:01

Tady mas jednoduchy Python3 skript, ktery stahne data a udela z nich Python slovnik. Ten se pak da jednoduse ulozit do libovolneho HTML souboru (klidne poradim, jen nevim jak by pro tebe mel vypadat).

http://dpaste.com/1254J3Y

Tohle muzes volat z cronu treba kazdych 5 minut

od **jakub.michalek** 18. 7. 2019 22:17

Emil Pastelka píše:Tady jsem udělal jednoduchý příklad. Je to celkem popisné.
https://codepen.io/pastelka/pen/GbxxqN

A teď se dívám, že to tam koliduje http/https. Pokud to budete načítat na serveru, který nemá https, upravte zdrojový odkaz v JS na http.

Ještě jednou se k téhle problematice vrátím. Zkusil jsem si ten příklad, který jste mi posílal, hodit do cvičného HTML souboru a spustit. Nakonec se to chytlo a data to korektně zobrazuje. Moje otázka ale zní: dal by se ten příklad upravit tak, aby se ta data dala zobrazit místo v tabulce jako klasický plain text? Hledal jsem i na Googlu, ale všude se mi podařilo najít akorát způsob s tabulkou.

od **Nargon** 19. 7. 2019 08:25

Jde to zcela jednoduše. Stačí tu "HTML" část nahradit třeba tímto:

Kód: Vybrat vše: Teplota: °C, Vlhkost: %, Světlo: lux

Pak to uvidíš jako jednoduchý text na řádku a už žádnou tabulku.

Pokud chceš ale odstranit všechny tagy a mít to opravdu jen jako plain text bez jakýchkoli html tagů, tak to samozřejmě také jde, ale znamená to větší zásah.

od **jakub.michalek** 19. 7. 2019 14:24

Vřelé díky všem za pomoc. Po dlouhé době se mi to konečně podařilo dát do takové podoby, jakou jsem chtěl. :-)

Data z JSONu na HTML stránku

Kdo je online