Ahoj Ludia, potrebujem pomoct. Chcem nacitat JSON data z URL adresy a zobrazit tie data v jednoduchej HTML stranke. Nieco som nasiel na nete, ale nefunguje mi to a neviem kde je chyba.
Takze zacnem asi tym nestastnym retazcom, ten je v tomto tvare:
Kód:
{"label_ds3": "label", "label_ds2": "label", "label_ds1": "ZEM", "label_ds0": "VZDUCH", "label_ds5": "label", "label_ds4": "label", "humi_dht": 0, "temp_ds2": -127, "temp_ds3": -127, "temp_ds0": 1.4, "temp_ds1": 3.1, "temp_ds4": -127, "temp_ds5": -127, "label": "Air Probe", "temp_dht": 0}
Script mam vytvoreny takto:
Kód:
var externiData = new XMLHttpRequest();
var obnoveni = 1000; // 1 vteřina
var animace = document.querySelector('.zobrazeni');
externiData.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var zdrojDat = this.responseText;
console.log(zdrojDat, this.responseText);
var hodnotaTeplota1 = zdrojDat.temp_ds0;
var hodnotaTeplota2 = zdrojDat.temp_ds1;
var hodnotaTeplota3 = zdrojDat.temp_ds2;
document.getElementById("vzduch").innerHTML = hodnotaTeplota1;
document.getElementById("zem").innerHTML = hodnotaTeplota2;
document.getElementById("bazen").innerHTML = hodnotaTeplota3;
}
};
setInterval(function() {
externiData.open("GET", "http://192.168.10.20:8080/plugins/air_temp_humi/data_json", true);
externiData.send();
animace.classList.toggle('zmena');
}, obnoveni);
a HTML spolu s CSS v jednom mam takto:
Kód:
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
html {
box-sizing: content-box;
font-family: "Roboto";
}
.zobrazeni{
display:table;
min-width: 200px;
min-height: 200px;
padding: 20px;
margin: 50px auto;
border-top: 5px solid;
border-bottom: 5px solid;
border-color:red;
font-size: 24px;
line-height: 40px;
text-transform: uppercase;
}
.zobrazeni td{
width: 120px;
}
.zobrazeni td:nth-of-type(2){
width: 70px;
text-align:right;
font-weight:700;
transition: all 500ms ease-in-out;
}
.zobrazeni td:nth-of-type(3){
width: 50px;
padding-left:20px;
}
.zmena td:nth-of-type(2){
color:gray;
}
</style>
<table class="zobrazeni">
<tr>
<td>VZDUCH:</td>
<td id="vzduch"></td>
<td>°C</td>
</tr>
<tr>
<td>ZEM:</td>
<td id="zem"></td>
<td>°C</td>
</tr>
<tr>
<td>BAZÉN:</td>
<td id="bazen"></td>
<td>°C</td>
</tr>
<script src="script.js"></script>
</table>
Problem je ze miesto ciselnej hodnoty mi tam zobrazi UNDEFINED.
Vie mi niekto poradit kde je zakopany pes? Pripadne napisat nejaky lepsi kod? Staci nieco jednoduche, pre cloveka ktory tomu rozumie to bude do 5 min.
Dakujem
