如何根据叶子值显示 JSON 树的特定路径？

Question

我有一个关于根据叶子的值显示树的路径的问题，例如我有以下 JSON :

{
  "children": 
  [
    {
      "children": 
       [
         {
           "name": "Predict Conversion"
         }
       ],
       "name": "Browser ID in {1}"
    }, 
    {
      "children": 
       [
         {
           "name": "Predict Click"
         }
       ],
       "name": "Browser ID not in {1}"
    }
  ],
  "name": "Device Type ID in {1,3,4}" 
}

我只想显示通向 value = "Predict Conversion"

叶子的完整路径

Answer 1

你可以对它使用递归。

快速示例

var tree = {
"children": [{
    "children": [{
        "name": "Predict Conversion"
    }],
    "name": "Browser ID in {1}"
}, {
    "children": [{
        "name": "Predict Click"
    }],
    "name": "Browser ID not in {1}"
}],
"name": "Device Type ID in {1,3,4}" 
};

console.debug(tree);

function getPath(node, value){
   if(typeof node.children !== "undefined" && node.children !== null){
     for(var index in node.children){
       var name = getPath(node.children[index], value);
       if(name) {
         return node.name+"."+name;
       }
     }
   } else {
      if(node.name === value){
        return node.name;
      } 
      return false;
   }
}

console.log(getPath(tree, "Predict Conversion"))

此fiddle

中的工作示例

Answer 2

您可以使用递归来遍历对象。使用 Array.isArray 测试对象的值是否为 Array 和 typeof(obj)==="object" 类型。

注意：对于 Array 和 Object

，typeof(obj) 将 return object

function searchInObj(obj, value, result) {
  
  // check for array and call for every item
  if (Array.isArray(obj)) {
    
    // primary flag for array.
    var r = false;
    obj.forEach(function(item, index) {
      
      // temporary flag for every iteration.
      var _r = searchInObj(item, value, result);
      if (_r) result.push(index)
      
      // if one of element returned true, array should return true.
      r = _r || r;
    });
    return r;
  } 
 
  // If Object, loop over properties
  else if (typeof(obj) === "object") {
    for (var k in obj) {
      
      // If object, check if property is Object/Array and call self.
      if (typeof(obj[k]) === "object") {
        var r = searchInObj(obj[k], value, result);
        if (r) result.push(k);
        return r;
      } 
      
      // If property is not Array/Object, match value
      else if (obj[k] === value) {
        result.push(k);
        return true;
      } 
      // If no match, return false
      else {
        return false;
      }
    }
  }
}

var data = {
  "children": [{
    "children": [{
      "name": "Predict Conversion"
    }],
    "name": "Browser ID in {1}"
  }, {
    "children": [{
      "name": "Predict Click"
    }],
    "name": "Browser ID not in {1}"
  }],
  "name": "Device Type ID in {1,3,4}"
}

var result = []
searchInObj(data, "Predict Conversion", result);
document.write("<pre>" + JSON.stringify(result.reverse(), 0, 4) + "</pre>");

注意：对于小 JSON，这会起作用，但如果您的 JSON 很长，这可能是非常昂贵的操作。

如何根据叶子值显示 JSON 树的特定路径？

How to display a specifc path from JSON tree depending on the leaves values?

javascript

tree

search

jquery

json