JavaScript如何遍历JSON中嵌套的列表（列表内包含子列表）

问题排查 #

前端错误点 #

• data.lists是订单数组，本身没有visitors属性，visitors是数组内每个独立订单对象的子属性，直接访问data.lists.visitors自然返回undefined。
• 遍历顺序颠倒：应该先遍历订单列表，再在单个订单内遍历它对应的访客数组，而不是先访问全局不存在的booking.visitors。
• 姓名取值层级错误：booking[i]['visitors']是数组，需要先指定访客下标，再取full_name属性，无需重复写两层full_name。
• 配置项错误：AJAX参数中指定返回数据类型用dataType不是type，type是请求方法的别名，和你写的method重复且取值错误。

后端错误点 #

• 现有逻辑将当前房间所有未退房的访客统一放到一个数组，赋值给该房间所有订单，没有按订单ID关联访客，会导致所有订单都显示全部访客，而非对应订单自身的访客。
• 原代码中赋值给obj的check_out变量未提前定义，会触发报错。

修正代码 #

后端views.py #

current_booking = Booking.objects.filter(leave=False, room_no__room_no=room_no)
lists = []
for booking in current_booking:
    # 按当前订单查询对应访客
    visitors_booking = BookingVisitor.objects.filter(booking=booking)
    visitors = []
    for j in visitors_booking:
        visitors.append({
            'full_name': j.visitor.full_name
        })
    check_out = booking.check_out if booking.check_out else None
    obj = {
        'id': booking.pk,
        'check_in': booking.check_in,
        'check_out': check_out,
        'visitors': visitors
    }
    lists.append(obj)

return JsonResponse({'success': True, 'lists': lists})

前端JS #

$.ajax({
    url: 'my_url',
    dataType: 'json',
    method: 'GET',
    success: function(data) {
        let bookingList = data.lists
        let content = ''
        // 遍历所有订单
        for (let i = 0; i < bookingList.length; i++) {
            let currentBooking = bookingList[i]
            // 遍历当前订单的访客列表
            for (let j = 0; j < currentBooking.visitors.length; j++) {
                content += '<div class="border border-purple-900 rounded-xl p-1 text-sm text-center">'
                content += '<p>' + currentBooking.visitors[j].full_name + '</p>'
                content += '</div>'
            }
            // 拼接入住退房时间
            content += '<div class="mt-1">'
            let checkIn = new Date(currentBooking.check_in).toLocaleDateString([], {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            })
            let checkOut = 'not mentioned'
            if (currentBooking.check_out) {
                checkOut = new Date(currentBooking.check_out).toLocaleDateString([], {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                })
            }
            content += '<p>' + checkIn + ' to ' + checkOut + '</p>'
            content += '</div>'
        }
        content += '</div>'
        $("#current-booking").html(content)
    }
})

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