Le code ci-dessous récupère l'objet Json à partir d'une URL dans une boucle.

Le problème est que je n'arrive pas à afficher les données Json renvoyées. Je souhaite afficher la température et l'humidité de l'objet.

Les objets Json valides sont retournés OK, mais je ne peux pas les afficher en HTML div.

Je ne vois rien imprimé à l'écran.

CODE COMPLET:

<html>
<head>
<title>json loop</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

    <div id="container">
    <div id="div"></div>
        <div id="output">nothing yet</div>
    </div>

<script>
    var previous = null;
    var current = null;
    var data;
    setInterval(function() {
        $.getJSON(
            "https://dweet.io/get/latest/dweet/for/myesp8266", 
            function(json) {
                data = json; 
                current = JSON.stringify(data); 
                $("div").html(data);
                console.log(data);           
                if (previous && current && previous !== current) {
                    console.log('refresh');
                    location.reload();
                }
                previous = current;
        });                       
    }, 2000);   


var output = document.getElementById('output');
output.innerHTML = data ;

</script>
</body>
</html>   
2
Robert Brown 15 janv. 2017 à 15:33

2 réponses

Meilleure réponse

Vous ne mettez pas la chaîne stringifiée dans le HTML. Utilisez current et non data?

data = json; 
current = JSON.stringify(data); 
$("div").html(current);
console.log(current);           
if (previous && current && previous !== current) {
    console.log('refresh');
    location.reload();
}
previous = current;

ÉDITER

Si vous voulez la température, utilisez:

$("div").html(data.with[0].content.temperature);
0
Alteyss 15 janv. 2017 à 12:45

Avez-vous essayé comme ça?

setInterval(function() {
    $.getJSON("https://dweet.io/get/latest/dweet/for/myesp8266", 
    function(json) {
        data = json; 
        current = JSON.stringify(data); 
        //$("div").html(data);
        console.log(data);           
        if (previous && current && previous !== current) {
            console.log('refresh');
            location.reload();
        }
        previous = current;
        var output = document.getElementById('output');
        output.innerHTML = current ;
    });                       
}, 2000);  

Éditer:

Voici un exemple de la façon dont cela peut fonctionner: https://plnkr.co/edit/GI5uzojOOmJNwAc73aXq? p = aperçu

0
Andrei Neagu 15 janv. 2017 à 12:56