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

Encountered an unexpected runtime error in Next.js - TypeError: Unable to access properties of null object (specifically 'tagName')

Attaching a click event to a nested element within an AngularJS directive

Issues arising from using `track by $index` in Angular UI Carousel

Utilizing JSON and select for dependency management

Understanding the functionality of scope in AngularJS is essential for mastering the framework

Obtain the parameter of a parent function that runs asynchronously

Unable to resolve the issue within Angular UI modal

Ways to bypass browser pop-up blockers when using the window.open function

Exploring Javascript through Python using Selenium WebDriver

Updating Sencha list itemTpl on the fly

Styling the <Autocomplete/> component in Material UI with React to achieve rounded corners

Choosing the appropriate data type for form data on the server

Encountering a problem with the Ionic Modal Slider: unable to locate the matching element associated with delegate-handle= when using $

Can you guide me on creating a post and get request using ReactJS, Axios, and Mailchimp?

Node and Express Fundamentals: Delivering Static Resources

How can I automate testing with Cucumber using Rails and Capybara to manage an AngularJS dialog box?

Challenges with 'this' reference in a requireif causing Vuelidate complications

"Mastering the art of utilizing Async in combination with waterfall and Recursion in node

What is the best way to create a dynamic pie chart in AngularJS using JSON data?

Having trouble retrieving the $_SESSION variable accurately from AngularJS