在孩子有多個父母的樹狀結構中顯示扁平列表？

Question

我是一名Javascript新手，也是編程初學者。我有一個帶有選擇/解決方案字段的「步驟」對象列表。此選擇/解決方案字段引用列表中的另一個對象。我想根據這個字段從這個列表創建一個樹形層次結構。

[這裏是數組文件我想重組就像一棵樹：

$scope.nodes = { 
    "story": { 
    "step" : [ 
     { 
     "title": "Begin", 
     "id": "0", 
     "type": "MultipleChoice", 
     "description": "Yo, bro it's the start of the adventure !", 
     "choice": [ 
      { 
      "nextStepId": "1", 
      "#text": "You was born as a troll, no luck in life. :'(" 
     }] 
     }, 
     { 
     "title": "Choice", 
     "id": "1", 
     "type": "MultipleChoice", 
     "description": "It's time to take your life back, and choice what you should do !", 
      "choice": [ 
     { 
      "nextStepId": "1001", 
      "#text": "Take an apple" 
     }, 
     { 
      "nextStepId": "4", 
      "#text": "Suicide" 
     }, 
     { 
      "nextStepId": "1001", 
      "#text": "You use a coin to know what to do" 
     } 
     ] 
     }, 
     { 
     "title": "Riddle", 
     "id": "4", 
     "type": "Riddle", 
     "description": "What is the best way to suicide ?", 
     "solution": { 
     "nextStep": "1000", 
      "#text": "think" 
     } 
     }, 
     { 
     "title": "you are dead", 
     "id": "1000", 
     "type": "End", 
     "win": "true", 
     "description": "Nice, you are dead finally !" 
     }, 
     { 
     "title": "you are alive", 
     "id": "1001", 
     "type": "End", 
     "win": "false", 
     "description": "Damn, you are still alive !" 

     } 
    ] 
} 
} 

，這裏是我做過什麼至今：

$scope.tree = function tree() { 
    var map = {}, node, roots = []; 
    for (var i = 0; i < nodes.length; i += 1) { 
    node = nodes.story.step[i]; 
    map[node.id] = i; 
    if (node.id !== "0") { 
     switch (node.type) { 
     case ("MultipleChoice"): 
      for (var j = 0; i < node.choice.length; j += 1) 
      nodes[map[node.id]].choice[j].nextStepId[j].push(node); 
      break; 
     case ("Riddle"): 
      nodes[map[node.id]].solution.nextStep[j].push(node); 
      break; 
     case ("End"): 
     //TO DO 
     } 
    } 
    else { 
     roots.push(node); 
    } 
    } 
}(nodes) 

（請注意，兒童（選擇/解決方案）可以有多個父代，並且'choice'可以是一個數組或一個元素。）

顯然，我做錯了什麼。選擇是'undefined'

請問你能改正我？我不知道。我希望保留自己的代碼以從錯誤中學習，但如果您有其他建議，請隨時提供。

非常感謝你

Answer 1

我會以不同的方式進行編碼。在這裏使用ng-switch非常有用。然後，您可以將當前步驟存儲在一個變量中，並在中決定要顯示的內容（多個選項，謎語或結尾）。

如果您想阻止用戶作弊，則必須在服務器端添加解決方案檢查，因爲您的模型在瀏覽器控制檯中可讀，並且用戶可以在單擊前檢查正確答案。

你應用程序中唯一不清楚的部分就是'謎題'問題。所以這可能不是你想要的。但這不應該很難修改。

請看下面的演示或在這個fiddle。

angular.module('demoApp', []) 
 
    .controller('mainCtrl', MainCtrl); 
 

 
function MainCtrl($scope) { 
 
\t var vm = this; 
 
    
 
    var nodes = { 
 
     "story": { 
 
      "step": [{ 
 
       "title": "Begin", 
 
       "id": "0", 
 
       "type": "MultipleChoice", 
 
       "description": "Yo, bro it's the start of the adventure !", 
 
       "choice": [{ 
 
        "nextStepId": "1", 
 
        "#text": "You was born as a troll, no luck in life. :'(" 
 
       }] 
 
      }, { 
 
       "title": "Choice", 
 
       "id": "1", 
 
       "type": "MultipleChoice", 
 
       "description": "It's time to take your life back, and choice what you should do !", 
 
       "choice": [{ // missing [ here 
 
        "nextStepId": "1001", 
 
        "#text": "Take an apple" 
 
       }, { 
 
        "nextStepId": "4", 
 
        "#text": "Suicide" 
 
       }, { 
 
        "nextStepId": "1001", 
 
        "#text": "You use a coin to know what to do" 
 
       }] 
 
      }, { 
 
       "title": "Riddle", 
 
       "id": "4", 
 
       "type": "Riddle", 
 
       "description": "What is the best way to suicide ?", 
 
       "solution": { 
 
        "nextStepId": "1000", 
 
        "#text": "think" 
 
       } 
 
      }, { 
 
       "title": "you are dead", 
 
       "id": "1000", 
 
       "type": "End", 
 
       "win": true, 
 
       "description": "Nice, you are dead finally !" 
 
      }, { 
 
       "title": "you are alive", 
 
       "id": "1001", 
 
       "type": "End", 
 
       "win": false, 
 
       "description": "Damn, you are still alive !" 
 

 
      }] 
 
     } 
 
    }; 
 

 
\t function getById(id) { 
 
    \t var node; 
 
     for(var i=0; i<nodes.story.step.length; i++) { 
 
     \t node = nodes.story.step[i]; 
 
      if (node.id === id) { 
 
      \t return node; 
 
      } 
 
     } 
 
    } 
 
\t angular.extend(vm, { 
 
    \t nodes: nodes, 
 
     curStep: nodes.story.step[0], 
 
     next: function(id) { 
 
     \t vm.curStep = getById(id); 
 
     } 
 
    }); 
 
    
 
\t /* 
 
    // too complicated 
 
    $scope.tree = function tree() { 
 
     var map = {}, 
 
      node, roots = []; 
 
     for (var i = 0; i < nodes.story.step.length; i++) { // nodes is an object 
 
      //console.log(nodes.story); 
 
      node = nodes.story.step[i]; 
 
      console.log(node); 
 
      node.choice.nextStepId = []; 
 
      node.solution.nextStep = []; 
 
      map[node.id] = i; 
 
      if (node.id !== "0") { 
 
       switch (node.type) { 
 
        case ("MultipleChoice"): 
 
         for (var j = 0; i < node.choice.length; j += 1) 
 
          nodes[map[node.choice[j].nextStepId]].choice[j].nextStepId.push(node); 
 
         break; 
 
        case ("Riddle"): 
 
         nodes[map[node.id]].solution.nextStep.push(node); 
 
       } 
 
      } else { 
 
       roots.push(node); 
 
      } 
 
     } 
 
     console.log(JSON.stringify(roots, null, 2)); 
 
    } 
 

 
    $scope.tree();*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainCtrl as ctrl"> 
 
    <div> 
 
     {{ctrl.curStep.description}} 
 
     <div ng-switch="ctrl.curStep.type"> 
 
      <div ng-switch-when="MultipleChoice"> 
 
       <div ng-repeat="choice in ctrl.curStep.choice"> 
 
       <!--<label>{{choice['#text']}}</label>--> 
 
        <!--<input type="checkbox" ng-click="ctrl.next(choice.nextStepId)"/>--> 
 
        <button ng-click="ctrl.next(choice.nextStepId)"> 
 
        {{choice['#text']}} 
 
        </button> 
 
       </div> 
 
      </div> 
 
      <div ng-switch-when="Riddle"> 
 
       <a href="#" ng-click="ctrl.next(ctrl.curStep.solution.nextStepId)">{{ctrl.curStep.solution['#text']}}</a> 
 
     </div> 
 
     <div ng-switch-when="End"> 
 
      Game Over! <strong>{{ctrl.curStep.win ? 'You\'ve won!': 'You\'ve lost'}}</strong> 
 
     </div> 
 
    </div> 
 
    <!-- just for debugging <pre>{{ctrl.nodes | json: 2}}</pre>--> 
 
</div>