JQuery 从解析的 JSON 向列表中添加元素

Posted 2023-05-09

【中文标题】JQuery 从解析的 JSON 向列表中添加元素

【英文标题】：JQuery Adding elements to a list from parsed JSON

【发布时间】：2014-04-08 03:15:32

【问题描述】：

我正在尝试解析一些 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);

我试图在 UL 中插入 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。

谢谢

【问题讨论】：

您可能没有有效数据，您已将 dataType 设置为 JSON，这意味着您已经有一个 javascript 对象，并且将该对象传递给 $.parseJSON 可能会失败，因为您现在重新解析两次。

另外，在 ajax 成功函数中，您希望 this 引用什么？

您能否发布您收到的 JSON 响应？

【参考方案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);

    );

【参考方案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 而不是先解析它）。

【参考方案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);

);

【参考方案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.');
    
);