如何在循环中填充HTML列表

Question

I have an Html list, I receive data as JSON dictionary from a REST call, I traverse and get their values. But I couldn't find how to generate the Html below with items in a loop.

<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? 

             });                        
      }); 

EDIT some solutions below is fine, but I dont want all the values from my object array, how can I get only these items(date, amount, place..etc) to the html div and ignore other items in the dictionary

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

you can use..

     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

try this...take a variable says html...iterate through json array...add items in list...and the put entire html inside a 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);