子供が複数の親を持つツリー構造でフラットリストを表示しますか？

Question

私はJavascriptの初心者であり、プログラミングの初心者です。私はchoice/solutionフィールドを持つ "ステップ"オブジェクトのリストを持っています。この選択/解決フィールドは、リスト内の別のオブジェクトを参照します。このフィールドに基づいてこのリストからツリー階層を作成したいと思います。ここで

は、[私は木のように再構築したい配列ファイルです：

$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) 

（/（子供という選択肢に注意してくださいソリューション）は2つ以上の親を持つことができ、その「選択」は配列または要素のいずれかになります）。

明らかに、私は何か間違っています。選択肢は「未定義」です

私を修正していただけますか？私はそれを把握することはできません。私は自分の間違いから学ぶために自分のコードを残したいと思っていますが、示唆すべきことがあれば自由に感じてください。

ありがとうございました

Answer 1

私はこれを別の方法でコードします。ここではng-switchを使用すると非常に便利です。次に、現在のステップを変数に格納して、表示する内容を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>