在HTML中分配XML-AJAX响应

Question

我有从xml中提取数据的页面。所有工作正常，但我不能在HTML中指定回复。

XML：

<XML> 
<script id="tinyhippos-injected"/> 
<sales> 
<sales_list> 
<id>123</id> 
<outlet_name>vividham</outlet_name> 
<sales_date>2015-05-22</sales_date> 
<sales_time>20:45:00</sales_time> 
</sales_list> 
</sales> 
</XML> 

以下是我的js。 -

var sales_date = $('#sales_date').val(); 

$.ajax({ 
      type: "GET", 
      url:'http://www.xyz.co/AppData/sales_list.php', 
      cache: false, 
      dataType: "xml", 
      success: function(xml) { 

       var items = $(xml).find('sales_list').filter(function(){ 
         return $('sales_date', this).text() == sales_date; 
        }); 

       items.each(function(index, sales_list){ 
        var id = $(this).find('id').text(); 
        var outlet_name = $(this).find('outlet_name').text(); 
        var sales_time = $(this).find('sales_time').text(); 

        // I am not able to assign data to html from here.        

       }); 
      } 


    }); 

HTML： -

<div class="list-block" id="sales_content"> 
    <ul> 
     <li class="item-content" id="sales_list"> 
      <div class="item-media">here I need time</div> 
       <div class="item-inner"> 
        <div class="item-title">Here I need outlet_name</div> 
      </div> 
     </li>       
    </ul> 
</div> 

div与sales_content将刷新按钮点击刷新内部<ul>内容。我怎样才能做到这一点？

Answer 1

在这种情况下，你需要创建动态html。取出内ul和li，让他们动态像下面

HTML

<div class="list-block" id="sales_content"></div> 

JS

var sales_date = $('#sales_date').val(); 
$.ajax({ 
    type: "GET", 
    url: 'http://www.xyz.co/AppData/sales_list.php', 
    cache: false, 
    dataType: "xml", 
    success: function (xml) { 

     var items = $(xml).find('sales_list').filter(function() { 
      return $('sales_date', this).text() == sales_date; 
     }); 

     var html = ''; 
     items.each(function (index, sales_list) { 
      var id = $(this).find('id').text(); 
      var outlet_name = $(this).find('outlet_name').text(); 
      var sales_time = $(this).find('sales_time').text(); 

      html += '<ul><li class="item-content" id="sales_list"><div class="item-media">' + sales_time + '</div><div class="item-inner"><div class="item-title">' + outlet_name + '</div></div></li></ul>'; 
     }); 

     $('#sales_content').append(html); 
    } 
}); 

Answer 2

尝试排序数组在此之前就可以了foreach循环：

items.sort(function(a, b) { 
    var aTime = $(a).find('sales_time').text(); 
    var bTime = $(b).find('sales_time').text(); 
    return (aTime == bTime) ? 0 : (aTime > bTime) ? 1 : -1; 
}).each(function(index, sales_list){ 
    //Now that it's sorted, do stuff here: 
    var id = $(this).find('id').text(); 
    var outlet_name = $(this).find('outlet_name').text(); 
    var sales_time = $(this).find('sales_time').text(); 
});