使用Ajax遍历嵌套JSON数组获取booking_status数据出现undefined报错问题

• booking_status是数组类型，直接将其拼接为字符串时，JS会自动调用toString()方法，因此输出[object Object],[object Object]的格式
• 直接访问item.booking_status.status返回undefined，是因为数组不能直接访问内部对象的属性，必须先指定数组下标定位到具体对象，例如item.booking_status[0].status才能获取到第一个预约记录的status属性值
• 原有代码存在冗余逻辑：外层已经声明$(document).ready，success回调内又嵌套了for循环、重复的$(document.ready)和forEach双层遍历，会导致页面重复渲染、性能浪费

根据展示需求选择对应处理方案：

1. 需要展示所有预约记录：新增一层遍历循环处理booking_status数组，将内部对象的属性拼接为需要的展示格式
2. 仅需要展示最新/第一条预约记录：直接通过下标[0]访问数组内的第一个对象属性即可，同时增加空数组判断避免报错

$(document).ready(function () {
    $.ajax({
        url: 'http://localhost:8000/', 
        dataType: 'JSON',
        success: function (data) {
            let content = ''
            data.forEach(item => {
                // 处理预约状态拼接
                let statusContent = '<ul>'
                item.booking_status.forEach(statusItem => {
                    statusContent += `<li>${statusItem.status} 入住：${statusItem.check_in} 退房：${statusItem.check_out}</li>`
                })
                statusContent += '</ul>'
                // 拼接表格行
                content += `<tr>
                    <td>${item.item_name}</td>
                    <td>${item.author}</td>
                    <td>${statusContent}</td>
                </tr>`
            })
            $('#table_body').html(content);
        }
    });
});

如果不需要展示所有记录，将预约状态处理部分替换为以下代码即可：

let statusText = item.booking_status.length > 0 ? item.booking_status[0].status : '无预约记录'
// 拼接时直接使用statusText
content += `<tr>
    <td>${item.item_name}</td>
    <td>${item.author}</td>
    <td>${statusText}</td>
</tr>`

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