JQuery將元素添加到已解析的JSON列表中

我想解析一些JSON並將元素「startTime」和「endTime」添加到列表中。我能夠成功接收JSON，但是我無法正確分析，然後通過循環將每個實例添加到列表中。裏面的UL的，我想每個創建列表，就像我在下面演示：JQuery將元素添加到已解析的JSON列表中

$.ajax({ 
url: 'localhost:8080/sample?', 
    dataType: 'json',    
success: function (data){ 
    var json = $.parseJSON(data); 
var $calAppts = $('#appts');  
    $('<li data-role="list-divider">' + this.startTime 
    + ' - ' + this.endTime + '<span class="ui-li-count"></span></li>').appendTo($appts);

在那裏我試圖插入李的UL內的HTML：

<div data-role="main" class="ui-content" id="headerDate"> 
    <ul data-role="listview" data-inset="true" id="appts"> 

    </ul> 
</div>

所以基本上對於每次約會我回到JSON中，我想添加一個新的LI與startTime和endTime。

我正在使用JQM 1.3.2和JQUERY 1.8.0。

謝謝

來源

2014-03-05 user3302087

您可能沒有有效的數據，你已經設置的數據類型爲JSON，這意味着你已經有一個JavaScript對象，該對象發送到$ .parseJSON很可能會失敗，因爲你現在是解析它兩次。 – adeneo

另外，在ajax成功函數中，你期待'this'引用了什麼？ – adeneo

您可以發佈您收到的JSON響應嗎？ –

更改此：

$.ajax({ 
url: 'localhost:8080/sample?', 
dataType: 'json',    
success: function (data){ 
var json = $.parseJSON(data); 
var $calAppts = $('#appts');  
$('<li data-role="list-divider">' + this.startTime 
+ ' - ' + this.endTime + '<span class="ui-li-count"></span></li>').appendTo($appts);

進入這個：

$.ajax({ 
    url: 'localhost:8080/sample?', 
    dataType: 'json',    
    success: function (data){ 
    var json = $.parseJSON(data); 

    $.each(json, function(key, value) { 

     var agrega = "<li data-role='list-divider'>"; 
     if(key=='startTime') 
     { 
      agrega = agrega + value 
     } 
     if(key=='endTime') 
     { 
      agrega = agrega + ' - ' + value; 
     } 
     agrega = agrega + '<span class="ui-li-count"></span></li>'; 
     $('#appts').append(agrega); 

    });

來源

2014-03-05 20:30:20 Hackerman

從您的代碼示例，看來你的問題是，你要尋找的startTime財產在錯誤的地方（在this）。在您的樣品中，startTime屬性應該是出現在您的解析的JSON，所以訪問的關鍵應該做的伎倆：

$('<li data-role="list-divider">' + json.startTime 
    + ' - ' + json.endTime + '<span class="ui-li-count"></span></li>').appendTo($appts);

如果返回的JSON是一個系列的時候，那麼你還需要循環通過JSON對象，以及：

$.each(json, function(key, value) { 
    if (key === 'startTime') { 
    // append to the list 
    } 
});

附加說明：

如果JSON是什麼正在從AJAX調用返回，那麼你不應該需要使用就可以了$.parseJSON。 JSON對象是JavaScript對象，因此您可以簡單地使用返回的值並訪問它們（也就是說，您可以直接使用data.startTime而不是先解析它）。

來源

2014-03-05 20:30:32 mgerton

請在下面找到

var ulObject = $("#appts"); 

var ajaxObject = $.ajax({ 
type:"POST", 
dataType:"json", 
url:"" //Provide the URL in the field to be processed. 
}); 

ajaxObject.done(function(msg){ 
var jsonResponse = $.parseJSON(msg); 
var listObjectStart = '<li data-role="list-divider">' 
var listObjectEnd = '</li>'; 
$.each(jsonResponse,function(key,value){ 
if(key === "startTime") 
{ 
listObjectStart += value; 
} 
else if(key === "endTime") 
{ 
listObjectStart += '-'+value+'<span class="ui-li-count"></span>'; 
} 
}); 

listObjectStart += listObjectEnd; 

ulObject.append(listObjectStart); 

});

來源

2014-03-05 20:35:59

響應嘗試以下如果服務器以JSON格式將數據發送回客戶端。

$.ajax({ 
    url: 'localhost:8080/sample?', 
    dataType : 'json', 
    success: function(data){ 
     $("#appts").append('<li data-role="list-divider">' + data.startTime 
+ ' - ' + data.endTime + '<span class="ui-li-count"></span></li>'); 
    }, 
    error: function(){ 
     alert('There was an error in communication.'); 
    } 
});

來源

2014-03-05 20:42:24 nuke1010

JQuery將元素添加到已解析的JSON列表中

回答

相關問題