2016-07-25 4 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 프레임의 약 1/3을 검색합니다.

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

부모 양식 노드를 찾을 방법이 있습니까? 나는 지금 예를 들어 id : 5와 id : 3 인 하나의 부모 whcih의 일부가 될 수있다.

관련 문제