0

Tengo una consulta, tengo un sensor que instalé de temperatura y quiero extraer los datos de JSON en una tabla HTML. Si yo ingreso a la IP http://10.64.1.113/getSensor me trae estos datos :

{"hum":"42","temp":"18.7","Conectado":1,"ThermocloudOnline":1}

Cree el siguiente JS y lo `linkie a un HTML:

const request = new XMLHttpRequest (); 
      
     request.open ('GET', 'http://10.64.1.113/getSensor'); 
     request.send (); 
      
     request.onload = () => { 
       if (request.status === 200) { 
         console.log ("Success"); // So extract data from json and create table 
         
         // Extracting data 
         var jokeid = JSON.parse (request.response) .value.temp; 
         var joke = JSON.parse (request.response) .value.hum; 
         
         // Creating table 
         var table = "<table>"; 
     table + = "<tr> <td> Temperatura </td> <td> Humedad </td> </tr>"; 

     table + = "</table>"; 
      
         // Showing the table inside table 
         document.getElementById ("mydiv"). innerHTML = table; 
       } 
     }; 
      
     request.onerror = () => { 
       console.log ("error") 
     }; 

Y en el HTML puse lo siguiente:

< div id="mydiv" >  < /div >

Pero me tira error al ingresar, que estoy haciendo mal ? .

Gracias!

4
  • ¿Qué has intentado? ¿Qué errores tienes? Recuerda el Ejemplo Mínimo Verificable de lo que has hecho y fundamentalmente parte del código que has utilizado (en texto, no imagen) que se menciona en el recorrido de bienvenida y en Cómo preguntar.
    – OCHOA
    Commented el 24 jul. 2023 a las 15:21
  • Hola! Gracias por responder, intente lo siguiente. crear un .JS. Edito el post y lo agrego! Commented el 24 jul. 2023 a las 15:24
  • ¿Primero envías la petición y luego agregas los listeners?.
    – Sal
    Commented el 24 jul. 2023 a las 16:04
  • ¡Bienvenido a Stack Overflow en español! Te invito a hacer el recorrido de bienvenida.Mencionas que hay un error, pero no indicas cuál es y, como puedes comprender, esta información es vital para poder entender cuál es el problema y probablemente sea el punto de partida para que un experto en tema pueda ayudarte a resolver la situación en que te encuentras. De otra forma, se hace muy difícil responderte. Encontrarás más información en Cómo preguntar y ejemplo mínimo verificable. Un saludo.
    – jachguate
    Commented el 24 jul. 2023 a las 22:16

2 respuestas 2

0

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>

Temperaturas

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>

Temps2

2
  • Gracias OCHOA, pero como le digo al PHP que el dato lo tiene que sacar de esta URL 10.64.1.113/getSensor .... Como es un aparato que lee la temp, Commented el 24 jul. 2023 a las 15:48
  • 1
    Esa es una pregunta diferente. Te sugiero hagas otra publicación preguntando eso. PD: Eso se haría con cURL o API :-)
    – OCHOA
    Commented el 24 jul. 2023 a las 15:56
0

Para los que no sepan encontré la solución, dejo el código por si alguien lo necesita:

<?php
    $url = "http://10.64.1.113/getSensor";

    $curl = curl_init($url);
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    $resp = curl_exec($curl);
    if($e=curl_error($curl)){
        echo $e;
    }else{
        $json=json_decode($resp, true);

        $nTemperatura=$json['temp'];
        $nHumedad    =$json['hum'];
    }

    curl_close($curl);
?>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.