如何借助 jQuery 搜索 JSON 树？

在处理 JSON 数据时，经常需要搜索树形数据结构中的特定节点。jQuery 的 grep() 方法可以帮助我们实现这个功能。

准备数据

首先，需要准备一个 JSON 树形结构的示例数据。这里我们以一个人员组织架构图为例。

{
  "name": "公司",
  "children": [
    {
      "name": "部门1",
      "children": [
        {
          "name": "经理1",
          "children": [
            {
              "name": "员工1"
            },
            {
              "name": "员工2"
            }
          ]
        },
        {
          "name": "经理2",
          "children": [
            {
              "name": "员工3"
            }
          ]
        }
      ]
    },
    {
      "name": "部门2",
      "children": [
        {
          "name": "经理3",
          "children": [
            {
              "name": "员工4"
            },
            {
              "name": "员工5"
            }
          ]
        },
        {
          "name": "经理4",
          "children": [
            {
              "name": "员工6"
            }
          ]
        }
      ]
    }
  ]
}

搜索节点

假设我们要搜索名字为“员工5”的节点。可以通过递归搜索树形结构来实现。

function searchNode(node, name) {
  if (node.name === name) {
    return node;
  } else {
    var result = null;
    if (node.children && node.children.length > 0) {
      for (var i = 0; i < node.children.length; i++) {
        result = searchNode(node.children[i], name);
        if (result) {
          break;
        }
      }
    }
    return result;
  }
}

var tree = { /* 树形结构数据 */ };
var node = searchNode(tree, "员工5");
console.log(node);

上述代码会输出以下结果：

{
  "name": "员工5"
}

借助 jQuery

借助 jQuery 的 grep() 方法，可以更简洁地搜索 JSON 树形结构。

function searchNode(node, name) {
  if (node.name === name) {
    return node;
  } else {
    var result = null;
    if (node.children && node.children.length > 0) {
      $.grep(node.children, function(child) {
        result = searchNode(child, name);
        return result;
      });
    }
    return result;
  }
}

var tree = { /* 树形结构数据 */ };
var node = searchNode(tree, "员工5");
console.log(node);

上述代码与前面的代码实现的功能相同，但更加简洁。

总结

在处理 JSON 树形结构数据时，搜索特定节点是常见需求。jQuery 的 grep() 方法可以帮助我们实现这个功能，让代码更加简洁易读。