jQuery循环遍历数据时首次循环返回undefined如何解决

问题原因 #

• 核心错误是你声明了my_div变量但没有初始化，JavaScript中只声明未赋值的变量默认值为undefined，首次循环执行字符串拼接操作my_div += '<a href=...>'时，相当于undefined + 字符串内容，最终渲染的HTML就会在开头出现多余的undefined字符，并非循环本身返回了undefined。
• 额外优化点：可以先对接口返回的cates做合法性校验，避免接口返回异常时出现JS报错。

修正后的代码 #

JavaScript部分 #

$.ajax({
    type:'GET',
    url:'/categories',
    success:function(data){
        var cates = data.data;  
        console.log(cates)   
        // 初始化赋值为空字符串即可解决undefined问题
        var my_div = '';  
        // 先校验cates是数组且有值再执行循环，避免接口异常报错
        if(Array.isArray(cates) && cates.length){
            $.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']
                balcon = balcon ? 'True' : '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(){
    }
})

HTML部分（和原有逻辑一致无需修改） #

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

内容的提问来源于stack exchange，提问作者artiest