title: How to fill HTML list in a loop
body: <p>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.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;ul role="list"&gt;
      &lt;li class="infoBasic" role="listitem"&gt;
          &lt;div class="date"&gt;20-12-2012&lt;/div&gt;
          &lt;div class="ammount"&gt;-&amp;euro;4,25&lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="infoDetails" role="listitem"&gt;
          &lt;div class="place"&gt;data&lt;/div&gt;
          &lt;div class="category"&gt;data&lt;/div&gt;
          &lt;div class="description_title"&gt;data&lt;/div&gt;
          &lt;div class="description"&gt;data&lt;/div&gt;
      &lt;/li&gt;
  
     //repeat this for multi items received from REST
  
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$.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? 
  
               });                        
        }); 
  </code></pre>
  
  <p>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</p>