2016-07-25 18 views
0

我想根據ID找到一個JSON objec,從下樹。 示例 - 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>" 
        }] 
      } 
     ] 
     } 
    } 
    } 
} 
+0

遞歸代碼非常昂貴。你有沒有辦法重組你的樹? –

+0

您是否嘗試過這種解決方案? - http://stackoverflow.com/questions/10679580/javascript-search-inside-a-json-object –

+0

我很確定,如果有找對象的形式樹中的任何其他方式。 – user3215858

回答

0

下面是展示遞歸搜索功能的片段。

作爲警告,該功能需要大約6毫秒搜索該樹,關於標準60fps的幀的三分之一。

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我們的列表或操縱它在一堆使用優化,本機功能的方式。

+0

有沒有遞歸的另一種方法來查找元素? – user3215858

+0

不是沒有重新排列'tree'結構。理想情況下,你會有一個平坦的結構與同一級別的每個「選擇」。 –

0

有沒有辦法找到immeida父窗體的節點?我是特定於現在的例子id:5,它可能是一個父母的一部分,它是id:3。