Navigating variable columns and rows in a static column table

Question

Navigating variable columns and rows in a static column table

Here is a preview of how my table will appear:

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Week 1</th>
        <th>Week 2</th>
        <th>Week 3</th>
    </tr>    
</thead>
<tbody>
    <tr>
        <td>Cooper</td>
        <td>Vikings</td>
        <td>Giants</td>
        <td>Rams</td>
    </tr>
    <tr>
        <td>Jon Doe</td>
        <td>Bears</td>
        <td></td> 
        <td>Seahawks</td>
    </tr>
</tbody>

Below is an example of the data I will be working with:

{
 "name" : "Cooper",
 "picks" [{"w1": "vikings"}, {"w2" : "Giants"}, {"w3" : "Rams"}]
},
{
 "name" : "Jon Doe",
 "picks" [{"w1": "Bears"}, {"w3" : "Seahawks"}]
}

I am seeking recommendations on the best approach to generate my output. While this is a basic illustration, in reality, my model will include 30 columns and some may be hidden depending on the week. The picks will follow a specific order, however, there might not be selections for every week. As shown in my example, Jon Doe did not choose a team for Week 2.

Thank you!

javascript angularjs breeze

Answer 1

Answer №1

To optimize your data structure, consider transitioning from an array to an object with keys for each week. This eliminates the need for inserting dummy or undefined records in the array, although that approach isn't necessarily problematic.

Below is a snippet showcasing a directive that can effectively address your issue. Note the specification of max-columns as 3 in the html for the directive (the tbody element).

angular.module("app", [])
  .controller("pickersCtrl", ['$scope',
    function($scope) {
      $scope.data = [{
        "name": "Cooper",
        "picks": {
          "w1": "Vikings",
          "w2": "Giants",
          "w3": "Rams"
        }
      }, {
        "name": "Jon Doe",
        "picks": {
          "w1": "Bears",
          "w3": "Seahawks"
        }
      }];
    }
  ])
  .directive("pickersRepeat", [
    function() {
      return {
        restrict: 'EA',
        scope: {
          pickers: '=',
          maxColumns: '@'
        },
        link: function(scope, element, attrs) {
          scope.$watch("pickers", function(pickers) {
            if (!pickers) {
              return;
            }
            var maxColumns = +scope.maxColumns;
            for (var i = 0; i < pickers.length; i++) {
              var picker = pickers[i];
              var row = angular.element('<tr/>');
              element.append(row);
              var nameColumn = angular.element('<td/>').text(picker.name); // append user name to Entry row
              row.append(nameColumn);
              var picks = picker.picks; // get user picks
              
              for (var j = 0; j < maxColumns; j++) {
                var column = angular.element('<td/>');
                row.append(column);
                var pick = picks["w" + (j + 1)]; // since the wX seem to start with 1 instead of 0 we add 1 here
                if (pick) {
                  // user made a pick for week j
                  column.text(pick); // put the text in column j
                }
              }
            }
          });
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <table ng-controller="pickersCtrl">
    <thead>
      <tr>
        <th>Entry</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
    </thead>
    <tbody pickers-repeat pickers="data" , max-columns="3">
    </tbody>
  </table>
</div>

Answer 2

To optimize your data structure, consider transitioning from an array to an object with keys for each week. This eliminates the need for inserting dummy or undefined records in the array, although that approach isn't necessarily problematic.

Below is a snippet showcasing a directive that can effectively address your issue. Note the specification of max-columns as 3 in the html for the directive (the tbody element).

angular.module("app", [])
  .controller("pickersCtrl", ['$scope',
    function($scope) {
      $scope.data = [{
        "name": "Cooper",
        "picks": {
          "w1": "Vikings",
          "w2": "Giants",
          "w3": "Rams"
        }
      }, {
        "name": "Jon Doe",
        "picks": {
          "w1": "Bears",
          "w3": "Seahawks"
        }
      }];
    }
  ])
  .directive("pickersRepeat", [
    function() {
      return {
        restrict: 'EA',
        scope: {
          pickers: '=',
          maxColumns: '@'
        },
        link: function(scope, element, attrs) {
          scope.$watch("pickers", function(pickers) {
            if (!pickers) {
              return;
            }
            var maxColumns = +scope.maxColumns;
            for (var i = 0; i < pickers.length; i++) {
              var picker = pickers[i];
              var row = angular.element('<tr/>');
              element.append(row);
              var nameColumn = angular.element('<td/>').text(picker.name); // append user name to Entry row
              row.append(nameColumn);
              var picks = picker.picks; // get user picks
              
              for (var j = 0; j < maxColumns; j++) {
                var column = angular.element('<td/>');
                row.append(column);
                var pick = picks["w" + (j + 1)]; // since the wX seem to start with 1 instead of 0 we add 1 here
                if (pick) {
                  // user made a pick for week j
                  column.text(pick); // put the text in column j
                }
              }
            }
          });
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <table ng-controller="pickersCtrl">
    <thead>
      <tr>
        <th>Entry</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
    </thead>
    <tbody pickers-repeat pickers="data" , max-columns="3">
    </tbody>
  </table>
</div>

Navigating variable columns and rows in a static column table

Answer №1

Similar questions

assisting with the transition effect using CSS3, JS, or jQuery

Migration of old AngularJS to TypeScript in require.js does not recognize import statements

Storing various duplicates of items in local storage

Response received from the server

Create HTML content dynamically with JavaScript and then utilize AngularJS to interpret and render it

"Learn how to transfer a selected value from a parent ASP.NET dropdownlist to a textbox in a popup window using JavaScript

Display the spinner until the data is successfully updated in the DOM using Angular

Guide on incorporating HTML page into MVC 5 using AngularJS routing

Increasing the nth-child Selector in Jquery

Unlocking the WiFi Security Key and Accessing Connected Devices with Javascript

React form events onSubmit and onClick fail to trigger within Zurb Foundation's 'Reveal' modal dialog

The ".splice()" method continuously removes the final element from an array

Tips on displaying substitute text in Angular when an Iframe fails to load the content located at the src

Tips for fixing a type error in javascript/cypress

Using Angular JS to retrieve specific information from a JSON file

Unraveling JSON data within an AngularJS controller

What is the process for advancing to the next or previous step using Angular.js?

Issue with ngFor displaying only the second item in the array

What is the specific function of $('id').on('click', this.method.bind(this)) in this scenario?

Having trouble setting the focus on a text box following a custom popup