JavaScript/AngularJS如何遍历多层复杂JSON生成指定结构对象

问题背景 #

现有如下结构的JSON字符串，需要基于该字符串解析生成新的对象结构：

var json =     "[{\"Id\":\"1234\",
        \"FirstName\":\"One\",    
        \"Index\":\"32\",
        \"Type\":\"t1\",
        \"Children\":[{\"Id\":\"976\",\"FirstName\":\"Two\",\"Index\":\"32\",\"Type\":\"t2\",     

           \"Children\":[{\"Id\":\"428\",
               \"FirstName\":\"Three\",            
               \"Index\":\"32\",
               \"Type\":\"t3\",
               \"Children\":[],
               \"ParentId\":\"f235\"}],        
               
        \"ParentId\":\"f826\"}],
     \"ParentId\":\"0000\"}]"

需求说明 #

• 仅保留Id、FirstName、Children、ParentId四个字段，剔除Index、Type冗余字段
• 保留嵌套结构：每层节点的Children数组存储子节点，子节点结构与父节点一致，逐层嵌套至最内层无有效子节点的节点

最初编写的实现代码存在逻辑缺失，无法正确处理多层嵌套的子节点：

var servicejson = JSON.parse(jsonStr);
 for (let i = 0; i < servicejson).length; i++) {
        var parentnode = {
            Id: servicejson[i].Id,
            FirstName: servicejson[i].JsonValue,        
            ParentId: servicejson[i].ParentId,             
        };        
        
        //check if children
        if (servicejson[i].Children.length > 0) {
            //do something here ??
        }
}

实现方案 #

核心逻辑是编写通用的单节点转换递归函数，无需手动编写固定层数的循环，即可自动处理任意深度的嵌套结构：

1. 单个节点转换时，先提取需要保留的基础字段，初始化空的Children数组
2. 校验当前节点是否存在非空的Children数组，若存在则遍历所有子节点，递归调用转换函数处理每个子节点，将处理结果赋值给当前节点的Children属性
3. 原始数据最外层是数组，遍历所有根节点调用转换函数即可得到最终结果

完整实现代码：

// 解析原始JSON字符串
const rawList = JSON.parse(json);

/**
 * 递归转换单个节点，仅保留指定字段
 * @param {Object} rawNode 原始节点对象
 * @returns {Object} 转换后的节点对象
 */
function formatNode(rawNode) {
  // 初始化当前节点，保留需要的字段
  const currentNode = {
    Id: rawNode.Id,
    FirstName: rawNode.FirstName,
    ParentId: rawNode.ParentId,
    Children: []
  };

  // 校验子节点合法性，存在有效子节点时递归处理
  if (Array.isArray(rawNode.Children) && rawNode.Children.length > 0) {
    currentNode.Children = rawNode.Children.map(child => formatNode(child));
  }

  return currentNode;
}

// 批量处理所有根节点，得到最终结构
const result = rawList.map(root => formatNode(root));

针对示例数据的转换结果 #

[
  {
    Id: "1234",
    FirstName: "One",
    ParentId: "0000",
    Children: [
      {
        Id: "976",
        FirstName: "Two",
        ParentId: "f826",
        Children: [
          {
            Id: "428",
            FirstName: "Three",
            ParentId: "f235",
            Children: []
          }
        ]
      }
    ]
  }
]

原代码问题修正 #

• 语法错误：for循环判断条件多了右括号，正确写法为i < servicejson.length
• 字段取值错误：FirstName字段取值误写为JsonValue，应取节点的FirstName属性
• 逻辑缺失：未实现子节点的递归处理逻辑，也未将构造完成的节点收集到最终结果数组中
• 鲁棒性不足：未做Children字段的类型校验，遇到无Children字段的节点会直接抛出类型错误

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