如何递归地找到特定的对象形式树

Question

我想从下面的树中找到基于 ID 的单个 json 对象。 示例 - getObjeById(4),

它应该从树下返回 obj。在这方面需要帮助。

data={
  "mytree": {
    "id": "dectree",
    "dt": {
      "choice": {
        "id": 0,
        "title": "Which color",
        "description": "Choose color ?",
        "choice": [
          {
            "id": 1,
            "title": "Yellow",
            "description": "Yellow ? ",

            "choice": [
              {
                "id": 5,
                "title": "Dark Yellow",
                "description": "Dark Yellow ,
                "choice": [
                  {
                    "id": 6,
                    "title": "id 6 yello",
                    "description": "<span> last leaf for yello </span>"
                  }]
              },
              {
                "id": 4,
                "title": "Light Yellow",
                "description": "Light Yellow 
              }
            ]
          },
          {
            "id": 2,
            "title": "Red",
            "description": "Red ?"
          },
          {
            "id": 3,
            "title": "Green",
            "description": "Green 
          },
          {
            "id": 7,
            "title": "white",
            "description": "white color",
             "choice": [
                  {
                    "id": 8,
                    "title": "id 8 white",
                    "description": "<span> last leaf for white </span>"
                  }]
          }
        ]
      }
    }
  }
}

Answer 1

下面是一个展示递归搜索功能的 sn-p。

正如警告的那样，这个函数需要大约 6 毫秒来搜索这棵树，大约是标准 60 fps 帧的三分之一。

var data = {
  "mytree": {
    "id": "dectree",
    "dt": {
      "choice": {
        "id": 0,
        "title": "Which color",
        "description": "Choose color ?",
        "choice": [{
          "id": 1,
          "title": "Yellow",
          "description": "Yellow ? ",
          "choice": [{
            "id": 5,
            "title": "Dark Yellow",
            "description": "Dark Yellow",
            "choice": [{
              "id": 6,
              "title": "id 6 yello",
              "description": "<span> last leaf for yello </span>"
            }]
          }, {
            "id": 4,
            "title": "Light Yellow",
            "description": "Light Yellow"
          }]
        }, {
          "id": 2,
          "title": "Red",
          "description": "Red ?"
        }, {
          "id": 3,
          "title": "Green",
          "description": "Green"
        }, {
          "id": 7,
          "title": "white",
          "description": "white color",
          "choice": [{
            "id": 8,
            "title": "id 8 white",
            "description": "<span> last leaf for white </span>"
          }]
        }]
      }
    }
  }
};
//Here comes the recursive function
function searchTree(data, idLabel, idValue, results) {
  if (idLabel === void 0) {
    idLabel = "id";
  }
  if (idValue === void 0) {
    idValue = "0";
  }
  if (results === void 0) {
    results = [];
  }
  var keys = Object.keys(data);
  keys.forEach(function search(key) {
    if (typeof data[key] == "object") {
      results = searchTree(data[key], idLabel, idValue, results);
    } else {
      if (data[key] == idValue && key == idLabel) {
        results.push(data);
      }
    }
  });
  return results;
}
console.log("Looking for 4:", searchTree(data, "id", "4"));
console.log("Looking for 6:", searchTree(data, "id", "6"));

编辑 - 扁平结构

理想的结构应该看起来更像这样：

var data = [{
  id: 1,
  title: "Yellow",
  description: "Yellow ? ",
  choices: [4, 5]
}, {
  id: 2,
  title: "Red",
  description: "Red ?",
  choices: []
}, {
  id: 3,
  title: "Green",
  description: "Green",
  choices: []
}, {
  id: 4,
  title: "Light Yellow",
  description: "Light Yellow",
  choices: []
}, {
  id: 5,
  title: "Dark Yellow",
  description: "Dark Yellow",
  choices: [6]
}, {
  id: 6,
  title: "id 6 yello",
  description: "<span> last leaf for yello </span>",
  choices: []
}, {
  id: 7,
  title: "white",
  description: "white color",
  choices: [8]
}, {
  id: 8,
  title: "id 8 white",
  description: "<span> last leaf for white </span>",
  choices: []
}];

console.log("Get elements with id == 7", data.filter(function(i) {
  return i.id === 7
})[0]);
console.log("Get elements with id == 2", data.filter(function(i) {
  return i.id === 1
})[0]);
console.log("Get elements with id == 3 or id == 4", data.filter(function(i) {
  return i.id === 3 || i.id === 4
}));

使用上述结构，使用filter 遍历树变得微不足道。此结构的计算时间大约为 2 毫秒，并且应该可以更好地扩展。

从这里，我们还可以轻松地sort 我们的列表或使用优化的本机功能以多种方式对其进行操作。

Answer 2

有没有办法找到 immeida 父表单节点？我现在正在获取特定的示例 id：5，它可能是 id:3 的一个父母的一部分。