如何将JSON对象转换为react-checkbox-tree所需的Node类型？

转换函数实现 #

下面的递归函数可以直接将你的JSON结构转换成react-checkbox-tree要求的Node格式：

function convertToNodes(obj) {
  return Object.entries(obj).map(([key, value]) => {
    // 生成label：首字母大写，其余保持原格式（可根据需求调整）
    const label = key ? key.charAt(0).toUpperCase() + key.slice(1) : "";
    const node = { value: key, label };

    // 检查当前节点是否有子节点
    const childKeys = Object.keys(value);
    if (childKeys.length > 0) {
      node.children = convertToNodes(value);
    }

    return node;
  });
}

使用示例 #

假设你的原始JSON数据存储在originalData变量中：

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

// 转换得到符合要求的nodes数组
const nodes = convertToNodes(originalData);

转换后结构说明 #

转换后的nodes数组会完全匹配react-checkbox-tree的格式：

• 每个节点包含value（对应原始JSON的键）、label（首字母大写后的键）
• 若原始节点下还有子对象，自动生成children数组，递归处理子节点
• 空字符串键、空对象的情况也会被正确处理（比如bbb下的空键会生成对应的节点）

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