JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<body ng-app ng-controller='PeopleController'>
    
    <h1>adults</h1>
    <ul>
        <li ng-repeat="adult in adults">
            <a ng-click="selectAdult(adult)">{{adult.id}}</a>        
        </li>
    </ul>
    
    <h2 ng-show='selectedAdult != null'>Children of {{selectedAdult.id}}</h2>
    <ul>
        <li ng-repeat="child in selectedAdult.children">{{child.id}}</li>
    </ul>
    
    <h2 ng-show='selectedAdult != null'>Grandchildren of {{selectedAdult.id}}</h2>
    <ul>
        <li ng-repeat="grandchild in grandChildren">{{grandchild.id}}</li>
    </ul>    
    
</body>

JavaScript

function PeopleController($scope){
    
  	$scope.selectedAdult = null;
	$scope.grandChildren = null;
    
    $scope.selectAdult = function(adult){
	    $scope.selectedAdult = adult;
	    $scope.grandChildren = [];
	    angular.forEach(adult.children, function(child){
	       $scope.grandChildren = $scope.grandChildren.concat(child.children);
	    });
	};
    
    $scope.adults = [
        {
          "id":"Jack",
          "employeeLevel":"1",
          "managerName":"John",
          "l1Mgr":"none",
          "l2Mgr":"none",
          "goals":[
             {
                "goalName":"Margin",
                "goalWeight":"0.5",
                "goalColor":"11.7"
             },
             {
                "goalName":"Expense",
                "goalWeight":"0.25",
                "goalColor":"NULL"
             }
          ],
          "children":[
             {
                "id":"Chuck",
                "employeeLevel":"2",
                "managerName":"Jack",
                "l1Mgr":"Jack",
                "l2Mgr":"none",
                "goals":[
                   {
                      "goalName":"Expense",
                      "goalWeight":"0.4",
                      "goalColor":"NULL"
                   },
                   {
                      "goalName":"Support",
                      "goalWeight":"0.25",
                      "goalColor":"NULL"
                   }
                ],
                "children":[
                   {
                      "id":"David",
                      "employeeLevel":"3",
                      "managerName":"Chuck",
                      "l1Mgr":"Jack",
                      "l2Mgr":"Chuck",
                      "goals":[
                         {
                            "goalName":"budget",
                            "goalWeight":"0.4",
                            "goalColor":"NULL"
                         },
                         {
                            "goalName":"Support",
...