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

【问题标题】：How to display a specifc path from JSON tree depending on the leaves values?如何根据叶子值显示 JSON 树中的特定路径？
【发布时间】：2016-07-23 16:40:25
【问题描述】：

我有一个关于根据叶子的值显示树的路径的问题，例如我有以下 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" 叶子的完整路径

【问题讨论】：

您能否详细说明您的问题，因为我不明白这里的叶子价值取决于什么...？
你期望像children[0].children[0].name这样的输出吗？
@n00dl3 我正在解析输出以便使用 D3.JS 创建可视化因此对于我的示例，我想保留：“名称”：“{1,3,4} 中的设备类型 ID " "name": "{1} 中的浏览器 ID" "name": "预测转化率"

标签： javascript jquery json search tree

【解决方案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 中的工作示例

【讨论】：

【解决方案2】：

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

注意：typeof(obj) 将为 Array 和 Object 返回 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 很长，这可能是非常昂贵的操作。

【讨论】：