在孩子有多个父母的树状结构中显示扁平列表？

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>