p5.js画布JSON表结构可视化render方法故障排查求助

你的render方法存在3个核心问题，导致复杂嵌套JSON无法生成正确的层级结构：

1. 数组处理逻辑错误：直接将数组第一个元素的属性渲染到父表，没有为数组创建对应子表，丢失层级关系
2. 对象处理逻辑错误：
   • 用data[i] + " (sub)"会输出[object Object] (sub)，应该用键名作为子表标题
   • 递归渲染时仍使用父表，未创建新子表承载嵌套内容
3. 对象遍历冗余操作：先添加key列再递归渲染，导致重复添加属性，层级混乱

修复后的完整代码 #

createTable({title, uid, isBase}) {
    return this.handler.addTable(uid, title, isBase)
}

createColumn(table, title, isSub = false) {
    return table.addColumn(title, isSub)
}

render(data, uid, isBase, ptable = null) {
    // 初始化根表
    if (!ptable) {
        ptable = this.createTable({
            title: uid,
            isBase,
            uid: uid,
            inside: true,
            parent: uid
        })
    }

    for (const key in data) {
        const value = data[key];

        // 处理数组类型
        if (Array.isArray(value)) {
            // 为数组创建子表
            const subTableTitle = `${key} (sub table)`;
            const subTable = this.createColumn(ptable, subTableTitle, true);
            // 取数组第一个元素的结构渲染（假设数组元素结构一致）
            if (value.length > 0 && typeof value[0] === 'object') {
                this.render(value[0], `${uid}_${key}`, false, subTable);
            }
        } 
        // 处理对象类型（排除null）
        else if (typeof value === 'object' && value !== null) {
            // 为对象创建子表
            const subTableTitle = `${key} (sub table)`;
            const subTable = this.createColumn(ptable, subTableTitle, true);
            // 递归渲染对象内容到子表
            this.render(value, `${uid}_${key}`, false, subTable);
        } 
        // 处理基本类型
        else {
            this.createColumn(ptable, key);
        }
    }
}

关键修改说明 #

1. 数组处理优化：遇到数组时先创建对应子表，再将数组第一个元素的结构递归渲染到子表中，保证层级正确
2. 对象处理修正：用键名作为子表标题，避免[object Object]的错误输出；递归时使用新创建的子表，维护嵌套层级
3. 移除冗余操作：删除原代码中重复添加列的逻辑，仅在处理基本类型时添加列，避免重复渲染
4. 子表UID生成：通过${uid}_${key}生成唯一子表UID，避免标识冲突

用你提供的测试JSON运行修复后的代码，会得到你期望的输出：

"id"
"type"
"name"
"ppu"
"batters (sub table)"
    "batter (sub table)"
        "id"
        "type"
"topping (sub table)"
    "id"
    "type"

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