jQuery從解析的JSON向列表中添加元素

Question

我正在嘗試解析一些JSON，並采用元素“ startTime”和“ endTime”並將它們添加到列表中。 我能夠成功接收JSON，但是在正確解析然后遍歷以將每個實例添加到列表時遇到麻煩。 在UL內部，我想為每個列表創建列表，例如下面的演示：

$.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);

我試圖在LI內插入LI的HTML：

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

  </ul>
</div>

因此，基本上，每次約會我都返回JSON，我想添加一個帶有startTime和endTime的新LI。

我正在使用JQM 1.3.2和JQUERY 1.8.0。

謝謝

Answer 1

更改此：

$.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);

    });

Answer 2

從您的代碼示例來看，似乎您的問題是您試圖在錯誤的位置（在this ）尋找startTime屬性。 在您的示例中， 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而不是先解析它）。

Answer 3

請在下面找到回復

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

});

Answer 4

如果服務器以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.');
    }
});