Monaca Onsen UI Discord Chat Github Repo

Onsen infinite "Lazy repeat" with ons-row and 2 Ons-col



  • Hello i am trying to have 2 columns in a row with data from API i cant do this with css
    and i tried with ons-col. I can have the data in 2 cols but the following action returns me the
    same data 2 times.How can i achieve to have the data in 2 cols using ons-row and ons-col
    when i cosume data from API
    Can someone help me?
    Thanks

    <ons-row>
    <ons-col width=”50%”>
    t+=val.category_name; t+=’‘val.category_description‘
    </ons-col>
    <ons-col width=”50%”>
    t+=val.category_name; t+=’‘val.category_description‘
    </ons-col>
    </ons-row>
    i am using the following function
    var displayCategory = function(data) {
    var list = document.getElementById(‘infinite_category’);

    var t='';
    $.each( data, function( key, val ) {
    	
    	t+='<ons-list-item tappable modifier="chevron" onclick="loadItem(' + "'" + val.cat_id + "'," + "'" + addslashes(val.category_name) + "'" + '   )">';
          t+='<ons-row>';
               	           
               t+='<ons-col>';
                 t+=val.category_name;
                 t+='<p class="small nomargin">'+val.category_description+'</p>';
                t+='</ons-col>';
               
              
               
          t+='</ons-row>';
        t+='</ons-list-item>';    	    
        
        var newItem = ons.createElement(t);
        list.appendChild(newItem);	    
        t='';	    
    });			
    
    initImageLoaded();
    

    };