Como en las etiquetas pones que lo quieres con PHP. Te daré una forma fácil de hacerlo.
<?php
$json = '{"hum":"42","temp":"18.7","Conectado":1,"ThermocloudOnline":1}';
// Así se obtiene un objeto stdClass.
$r1 = json_decode($json);
echo '<pre>';
var_dump($r1);
echo '</pre>';
echo 'Temperatura es: '.$r1->temp;
echo '<br>****************';
// Así se obtiene un Array Asociativo.
$r2 = json_decode($json, true);
echo '<pre>';
var_dump($r2);
echo '</pre>';
echo 'Temperatura es: '.$r2['temp'];
echo '<br>****************';
Y una tabla básica de HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parser</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<!-- CSS Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<table class="table">
<tr>
<th>Humedad</th>
<th>Temperatura</th>
<th>Conectado</th>
</tr>
<tr>
<td><?php echo $r1->hum; ?></td>
<td><?php echo $r1->temp; ?></td>
<td><?php
if ($r1->Conectado == 1) {
echo 'Conectado';
}
else{
echo 'No Conectado';
}
?></td>
</tr>
</table>
</div>
</body>
</html>
Es obvio que si en el JSON vienen varios datos, luego de crear el array lo tendrás que iterar con un foreach
y quedará algo mas o menos así.
<?php
$json = '{
"salon1":{"name":"Alfa","hum":"42","temp":"18.7","Conectado":1,"ThermocloudOnline":1},
"salon2":{"name":"Bravo","hum":"45","temp":"19.7","Conectado":0,"ThermocloudOnline":3},
"salon3":{"name":"Charlie","hum":"47","temp":"21.7","Conectado":1,"ThermocloudOnline":2}
}';
// Así se obtiene un objeto stdClass.
$r1 = json_decode($json);
Y el HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parser</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<!-- CSS Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<table class="table">
<tr>
<th>Salon</th>
<th>Humedad</th>
<th>Tenmperatura</th>
<th>Conectado</th>
</tr>
<?php
foreach ($r1 as $salon => $datos) {
?>
<tr>
<td><?php echo $datos->name; ?></td>
<td><?php echo $datos->hum; ?></td>
<td><?php echo $datos->temp; ?></td>
<td><?php
if ($datos->Conectado == 1) {
echo 'Conectado';
}
else{
echo 'No Conectado';
}
?></td>
</tr>
<?php
}
?>
</table>
</div>
</body>
</html>