mise à jour du contenu html automatiquement

Question

J'ai un fichier temp.php qui donne une sortie au format JSON:

[{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{"Date":"2017-02-25 23:25:50","Temp":"0.00"}] 

Je veux charger toutes les valeurs de date et temp dans une page Web. Pour cela, le code que j'ai écrit est:

<div id ="output"> text replaced </div> 
$.ajax({ 
url:'temp.php', 
data : " ", 
dataType:'json' 
success:function(data) 
{ 
    var date = data[0]; 
    var tempval = data[1]; 
$('#output').html("<b> DATE:</b>"+date+"<b> TEMPER: </b>"+tempval) 
} 

Mais je reçois la sortie en tant qu'objet, quelle est l'erreur?

Answer 1

Vous devez accéder comme ci-dessous

data[0].Date // 2016-10-25 16:12:30 
data[0].Temp // 1.0 

OU

data[0]['Date'] // 2016-10-25 16:12:30 
data[0]['Temp'] // 1.0 

Exemple:

var data= [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{"Date":"2017-02-25 23:25:50","Temp":"0.00"}] 
 

 
console.log(data[0].Date); 
 
console.log(data[0].Temp); 
 
console.log(data[0]['Date']); 
 
console.log(data[0]['Temp'])

La façon dont vous accédez

success:function(data) 
{ 
    var date = data[0]; 
    var tempval = data[1]; 
$('#output').html("<b> DATE:</b>"+date+"<b> TEMPER: </b>"+tempval) 
} 

Date sera

date = {"Date":"2016-10-25 16:12:30","Temp":"1.00"}; 
         ^
        This is object inside {} 

tempval sera

tempval = {"Date":"2016-10-25 16:24:05","Temp":"1.00"}; 
         ^
        This is object inside {} 

Ainsi, vous obtenez ci-dessous

Mais je reçois comme sortie, objet objet

Pour tout commentaire

Mais ce qui donne des données de première ligne seulement. Je veux tout les dates et les valeurs de temp. Ce qui doit être fait?

var data= [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{"Date":"2017-02-25 23:25:50","Temp":"0.00"}]; 
 

 
$.each(data, function(index,item){ 
 
$('#output').append("<b> DATE:</b>"+item.Date+"<b> TEMPER: </b>"+item.Temp+"<br>") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="output"></div>