i'm trying to loop through my data , but it returns undefined for the first loop! , i tried several ways but still not work !
$.ajax({
type:'GET',
url:'/categories',
success:function(data){
var cates = data.data;
console.log(cates)
var my_div;
$.each(cates,function(key,value){
console.log(value)
var beds = value['beds']
console.log(beds)
var f_type = value['f_type']
var room_type = value['room_type']
var total = value['total']
var balcon = value['balcon']
if(balcon==true){
balcon='True'
}else{
balcon='False'
}
var link = '/rooms/'+f_type+'/'+room_type+'/'+beds+'/'+balcon;
my_div+='<a href="'+link+'" class="transition transform cursor-pointer duration-400 hover:scale-105 hover:shadow-xl">';
my_div+='<div class="h-32 overflow-hidden rounded-tl-2xl rounded-tr-2xl room"></div>';
my_div+='<div class="items-center p-2 rounded-bl-xl rounded-br-xl bglightpurple">';
my_div+='<div class="text-center rounded-lg" style="background: #534e70;">';
my_div+='<p class="inline textorange "><i class="bi bi-columns-gap"></i></p>'
my_div+='<p class="inline text-white">'+room_type+' - '+f_type+' - '+beds+ ' beds</p>';
my_div+='</div>';
my_div+='</div>';
my_div+='</a> ';
})
document.getElementById('my_cates').innerHTML = my_div;
},
error: function(){
}
})<div class="p-4 mt-3">
<div class="grid grid-cols-1 gap-6 pt-3 pt-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 " id="my_cates">
</div>
</div>i also tried to use for(i=0;i<cates.length;i++) but still it returns the same thing , undefined for first loop ?!
is there something i did wrong ?
thanks in advance
simply just put it into a function and define my_div as =="" it works
the entire code
function cates(){
var my_div = "";
$.ajax({
type:'GET',
url:'/categories',
success:function(data){
var cates = data.data;
for(i=0;i<cates.length;i++){
var beds = cates[i]['beds']
var f_type = cates[i]['f_type']
var room_type = cates[i]['room_type']
var total = cates[i]['total']
var balcon = cates[i]['balcon']
if(balcon==true){
balcon='True'
}else{
balcon='False'
}
var link = '/rooms/'+f_type+'/'+room_type+'/'+beds+'/'+balcon;
my_div+='<a href="'+link+'" class="transition transform cursor-pointer duration-400 hover:scale-105 hover:shadow-xl">';
my_div+='<div class="h-32 overflow-hidden rounded-tl-2xl rounded-tr-2xl room"></div>';
my_div+='<div class="items-center p-2 rounded-bl-xl rounded-br-xl bglightpurple">';
my_div+='<div class="text-center rounded-lg" style="background: #534e70;">';
my_div+='<p class="inline textorange "><i class="bi bi-columns-gap"></i></p>'
my_div+='<p class="inline text-white">'+room_type+' - '+f_type+' - '+beds+ '</p>';
my_div+='</div>';
my_div+='</div>';
my_div+='</a> ';
}
document.getElementById('my_cates').innerHTML = my_div;
},
error: function(){
}
})
}
cates();