如何用JavaScript按键值扁平化嵌套JSON对象？

需求说明 #

我需要将嵌套的JSON对象转换为指定结构，遵循以下规则：

• 若outer_component[x]包含section{}，直接将该section移至最外层outer_component数组
• 若outer_component[x]包含outer_body{}，则持续迭代内层结构，直到找到section{}，再将其移至最外层outer_component数组

接收的输入JSON #

{"document": {"outer_component": [{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_11"}]}},{"section": {"id": [{"root": "INNER_12"}]}}]}},{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_21"}]}},{"section": {"id": [{"root": "INNER_22"}]}}]}}]}},{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_31"}]}},{"section": {"id": [{"root": "INNER_32"}]}}]}},{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_33"}]}},{"section": {"id": [{"root": "INNER_34"}]}}]}}]}}]}}]}}}

预期输出JSON #

{"document": {"outer_component": [{"section": {"id": [{"root": "INNER_11"}]}},{"section": {"id": [{"root": "INNER_12"}]}},{"section": {"id": [{"root": "INNER_21"}]}},{"section": {"id": [{"root": "INNER_22"}]}},{"section": {"id": [{"root": "INNER_31"}]}},{"section": {"id": [{"root": "INNER_32"}]}},{"section": {"id": [{"root": "INNER_33"}]}},{"section": {"id": [{"root": "INNER_34"}]}}]}}}

解决方案代码 #

可以通过递归遍历的方式提取所有section对象，再重新构建目标结构：

function flattenSections(inputObj) {
    const collectedSections = [];

    // 递归遍历函数，查找并收集section
    function traverse(item) {
        // 当前项是section，直接收集
        if (item.section) {
            collectedSections.push(item);
            return;
        }
        // 当前项包含outer_body，继续遍历内层outer_component
        if (item.outer_body?.outer_component) {
            item.outer_body.outer_component.forEach(traverse);
        }
    }

    // 从最外层outer_component开始遍历
    inputObj.document.outer_component.forEach(traverse);

    // 构建预期的输出结构
    return {
        document: {
            outer_component: collectedSections
        }
    };
}

// 测试使用
const input = {"document": {"outer_component": [{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_11"}]}},{"section": {"id": [{"root": "INNER_12"}]}}]}},{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_21"}]}},{"section": {"id": [{"root": "INNER_22"}]}}]}}]}},{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_31"}]}},{"section": {"id": [{"root": "INNER_32"}]}}]}},{"outer_body": {"outer_component": [{"section": {"id": [{"root": "INNER_33"}]}},{"section": {"id": [{"root": "INNER_34"}]}}]}}]}}]}}]}}}

const result = flattenSections(input);
console.log(JSON.stringify(result, null, 2));

代码说明 #

1. 定义collectedSections数组用于存储所有找到的section对象
2. 递归函数traverse会检查当前元素：
   • 如果包含section属性，直接将该元素加入收集数组
   • 如果包含outer_body且内层有outer_component，则遍历该数组继续递归查找
3. 遍历最外层的outer_component，启动递归收集
4. 最后用收集到的section数组构建符合预期的JSON结构

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