React+TypeScript中嵌套JSON对象格式化问题求助

原函数的核心问题 #

• 手动拼接JSON字符串极易触发语法错误，比如多余逗号、括号不闭合
• value字段错误使用层级数字参数，而非当前节点的key值
• 键名不符：期望用children但代码里写的是child
• 空对象处理逻辑混乱，导致生成无效结构
• 循环未处理数组元素间的逗号，最终JSON无法被JSON.parse解析

正确实现方案 #

先定义转换后的数据结构类型，让TypeScript做类型校验：

interface TreeNode {
  value: string;
  label: string;
  children?: TreeNode[];
}

然后写递归转换函数，直接生成JS对象再转JSON，彻底避免手动拼接的错误：

function convertJsonToTree(obj: Record<string, any>): TreeNode[] {
  return Object.entries(obj).map(([key, value]) => {
    // 过滤null和空对象，判断是否需要生成children
    const hasChildren = typeof value === 'object' && value !== null && Object.keys(value).length > 0;
    
    const node: TreeNode = {
      value: key,
      label: key
    };

    if (hasChildren) {
      node.children = convertJsonToTree(value);
    }

    return node;
  });
}

使用示例 #

const a = {
    "aaa": {
        "aa": {
            "xxx": {
                "xxxx": {}
            }
        },
        "ab": {
            "xxx": {},
            "xxxx": {
                "xxxx": {}
            },
            "yyy": {
                "yyyy": {},
                "zzzz": {},
                "kkkk": {}
            }
        }
    },
    "bbb": {
        "": {}
    }
};

// 生成符合要求的格式化JSON字符串
const result = JSON.stringify(convertJsonToTree(a), null, 2);
console.log(result);

为什么这个方案更可靠 #

• 直接操作JS对象，完全规避手动拼接JSON的语法风险
• TypeScript类型定义确保输出结构严格符合预期
• 递归逻辑清晰，空对象自动省略children字段（如果需要保留空数组，可修改hasChildren的判断条件为typeof value === 'object' && value !== null）
• 用Object.entries遍历键值对，避免遍历原型链上的冗余属性

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