Блог

Главная - Вопросы по программированию - как для-цикла возвращать объекты словаря — неопределенные — jquery

как для-цикла возвращать объекты словаря — неопределенные — jquery

#javascript #jquery

Вопрос:

я пытаюсь перебрать свои данные , но они возвращаются undefined для первого цикла! , я пробовал несколько способов, но все еще не работает !

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

я также пытался использовать for(i=0;i<cates.length;i ) , но все равно он возвращает то же самое, не определено для первого цикла ?!
я что-то сделал не так ?
заранее спасибо

Комментарии:

1. Подсказка: прекратите использовать объединение строк со всеми возможными ошибками и начните использовать строки шаблонов , которые одновременно легче читать и гораздо менее подвержены ошибкам. Также не полагайтесь на == , используйте === и проверяйте правильные значения, поэтому в этом случае проверьте balcon строку "true" . И наконец: прекратите использовать var . Либо используйте let , если вам нужны изменяемые переменные, либо const если вы хотите «установить один раз и ошибка при переназначении». JS стал значительно лучше в 2015 году, похоже, вы используете код до 2015 года.

2. Конечная точка, вероятно, не возвращает никаких данных? Показывает ли «console.log(cates)» массив объектов?

3. @BenzStevox это отлично работает в консоли

4. @Mike’Pomax’Camermans я удалил тестовый случай и изменил var его на let все ту же проблему

Ответ №1:

просто поместите его в функцию и определите my_div , как =="" он работает, весь код

 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();
Метки: