2017-02-26 83 views
1

我有一個temp.php文件賦予輸出JSON格式:更新HTML內容自動

[{"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"}] 

我想所有的日期和溫度值加載到一個網頁。爲此,我寫的代碼是:

<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) 
} 

但是我得到輸出爲對象,錯誤是什麼?

回答

2

您有權訪問像下面

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

OR

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

例如:

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'])

您正在訪問

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

方式日期將是

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

tempval將

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

這樣你可以獲得以下

但我得到輸出,目標對象

發表評論

但這僅僅給出了第一行的數據。我想要所有 日期和臨時值。需要做什麼?

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>

+0

謝謝。但是這隻給出了第一行的數據。我想要所有日期和臨時值。需要做什麼? – sam

+0

你需要循環,讓我更新 –

+0

@sam我更新了我的文章 –