Question

我有一个Html列表，我从REST调用接收数据作为JSON字典，我遍历并获取它们的值。但我找不到如何使用循环中的项目生成下面的Html。

<div class="container">
<ul role="list">
    <li class="infoBasic" role="listitem">
        <div class="date">20-12-2012</div>
        <div class="ammount">-&euro;4,25</div>
    </li>
    <li class="infoDetails" role="listitem">
        <div class="place">data</div>
        <div class="category">data</div>
        <div class="description_title">data</div>
        <div class="description">data</div>
    </li>

   //repeat this for multi items received from REST

</ul>

$.ajax
  ({

   success: function (data){                    
        var transactions=data['transactions'];      

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

                //here how to set/create the appropriate div elements(like above) 
                // with the values I get here in a loop? 

             });                        
      });

编辑下面的一些解决方案很好，但我不想要我的对象数组中的所有值，我怎样才能将这些项目（日期，数量，地点......等）添加到html div并忽略字典中的其他项目

Answer 1

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

            //here how to set/create the appropriate div elements(like above) 
            // with the values I get here in a loop? 

            $(".infoDetails").append("<div class='" + key + "'>" + value + "</div>");
         });

Answer 2

你可以使用..

     var data = "";

   $.each( transactions, function( key1, value1 ) {
         data +="<li class ='"+ key1 +"' role='listitem'>";

             $.each( value1, function( key, value) {
                 data +="<div class ='"+ key +"'>"+value+"</div>"; 
             });
     });  


   $("ul").html(data); // selecting ul element and then embedding html into it..

Answer 3

尝试这个...拿一个变量说html ...遍历json数组...在列表中添加项目...并将整个html放在div中...

var html='<ul>';
$.ajax
  ({

   success: function (data){                    
        var transactions=data['transactions'];      

        $.each( transactions, function( key, value ) {
             $.each( value, function( key, value) { 
                html+='<li class="'+key+'">'+value+'</li>';
             });                        
      });
       } 
 }); 
html+='</ul>';
$('#idofdiv').html(html);

如何在循环中填充HTML列表

3 个答案: