Fill a table using ng-repeat and verify that the header data matches

Question

Fill a table using ng-repeat and verify that the header data matches

In my project, I have an array of years that are used to populate the table header row. Additionally, there is an object containing data that populates the table itself. The challenge is to place the correct year data under the corresponding year header. This requires checking if the year(Y) in the object matches the year in the header array, and adding an empty cell if they don't match. The object is sorted by year. What would be the most effective approach to achieve this? You can view the code on JSFiddle.

CONTROLLER

 var app = angular.module("testModule", []);
 app.controller('testController', function($scope) {
 $scope.headerYears = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020];

$scope.rows = [{
  "Name": "Name1",
  "Col": [{
    "Y": 2013,
    "M": 25711
  }, {
    "Y": 2014,
    "M": 26095
  }, {
    "Y": 2015,
    "M": 23641
  }, {
    "Y": 2016,
    "M": 22224
  }, {
    "Y": 2017,
    "M": 21968
  }, {
    "Y": 2018,
    "M": 23820
  }, {
    "Y": 2019,
    "M": 26673
  }, {
    "Y": 2020,
    "M": 29329.5
  }]
}, {
  "Name": "Name2",
  "Col": [{
    "Y": 2013,
    "M": 83
  }, {
    "Y": 2014,
    "M": 461
  }, {
    "Y": 2015,
    "M": 1067
  }, {
    "Y": 2016,
    "M": 1120
  }, {
    "Y": 2017,
    "M": 1050
  }, {
    "Y": 2018,
    "M": 600
  }, {
    "Y": 2019,
    "M": 475
  }, {
    "Y": 2020,
    "M": 481
  }]
}, {
  "Name": "Name3",
  "Col": [{
    "Y": 2013,
    "M": 25794
  }, {
    "Y": 2014,
    "M": 26556
  }, {
    "Y": 2015,
    "M": 24708
  }, {
    "Y": 2016,
    "M": 23424
  }, {
    "Y": 2017,
    "M": 23297
  }, {
    "Y": 2018,
    "M": 24412.5
  }, {
    "Y": 2019,
    "M": 27090.5
  }, {
    "Y": 2020,
    "M": 29754.5
  }]
 }]
});

HTML

<table border="1" data-ng-app="testModule" data-ng-controller="testController">
   <thead>
    <tr>
      <th ng-repeat="i in headerYears">{{i}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="item in row.Col">{{item.M}}{{item.Y}}</td>
    </tr>
  </tbody>

javascript angularjs

Answer 1

Answer №1

To conditionally show elements in the DOM, I would use ng-if.

<table border="1" data-ng-app="testModule" data-ng-controller="testController">
  <thead>
    <tr>
      <th ng-repeat="i in headerYears">{{i}}</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td ng-repeat="i in headerYears" >{{i}}  
      <span ng-repeat="row in rows"></span> 
      <span ng-repeat="item in row.Col">{{item.Y}} </span>
      </td>     
    </tr>
  </tbody>
</table>

Additionally, you can include an NG-IF directive within the span elements like this: span ng-if="item.Y==i" and another span ng-if="item.Y != i"

Answer 2

To conditionally show elements in the DOM, I would use ng-if.

<table border="1" data-ng-app="testModule" data-ng-controller="testController">
  <thead>
    <tr>
      <th ng-repeat="i in headerYears">{{i}}</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td ng-repeat="i in headerYears" >{{i}}  
      <span ng-repeat="row in rows"></span> 
      <span ng-repeat="item in row.Col">{{item.Y}} </span>
      </td>     
    </tr>
  </tbody>
</table>

Additionally, you can include an NG-IF directive within the span elements like this: span ng-if="item.Y==i" and another span ng-if="item.Y != i"

Answer 3

Answer №2

To ensure consistency in the columns of your table, it is important to consider that the length of row.col can vary compared to the length of headerYears.

For each row, you must iterate over headerYears to maintain uniform column sizes throughout.

Refer to this example I have created, which might provide a solution for you.

It is advisable to create a new array of objects linked to the years specified in the controller and then use ng-repeat on this new array.

In my opinion, this approach will result in a cleaner DOM structure that is easier to manage.

I have included a filter to parse through column data and display the appropriate information based on each situation.

 app.filter('testFilter', function() {
    return function(col, header) {
       if (!col ){
        return "Empty";
       } 
       if (!header){
        return "Empty"; 
       }


       var returnVal="Empty Item";
       angular.forEach(col, function(colItem){
         if(header===colItem.Y) {
            returnVal = colItem.M+" "+colItem.Y;
        }
       });

    return returnVal;

   }
});

The DOM structure has also been updated to resemble the following:

<tbody>
   <tr ng-repeat="row in rows">
      <td ng-repeat="i in headerYears">
         {{row.Col | testFilter:i }}
      </td>
   </tr>
</tbody>

Answer 4

To ensure consistency in the columns of your table, it is important to consider that the length of row.col can vary compared to the length of headerYears.

For each row, you must iterate over headerYears to maintain uniform column sizes throughout.

Refer to this example I have created, which might provide a solution for you.

It is advisable to create a new array of objects linked to the years specified in the controller and then use ng-repeat on this new array.

In my opinion, this approach will result in a cleaner DOM structure that is easier to manage.

I have included a filter to parse through column data and display the appropriate information based on each situation.

 app.filter('testFilter', function() {
    return function(col, header) {
       if (!col ){
        return "Empty";
       } 
       if (!header){
        return "Empty"; 
       }


       var returnVal="Empty Item";
       angular.forEach(col, function(colItem){
         if(header===colItem.Y) {
            returnVal = colItem.M+" "+colItem.Y;
        }
       });

    return returnVal;

   }
});

The DOM structure has also been updated to resemble the following:

<tbody>
   <tr ng-repeat="row in rows">
      <td ng-repeat="i in headerYears">
         {{row.Col | testFilter:i }}
      </td>
   </tr>
</tbody>

Answer 5

Answer №3

This method is much more efficient than creating a custom filter for each value you want to display. By using {{item.myProperty}} within the TD, you can insert any HTML you desire. Enjoy!

It organizes your data to align with the headers, allowing JavaScript to perform optimally and providing clean data to Angular. I hope this explanation is helpful!

//BEGINNING OF FUNCTIONAL CODE
$scope.rows = null;

(function(){
  var raw = [{ /** all existing "rows" data has been transferred here**/ }];

  var bucketize = function(col) {
      var data = new Array();
      for (var i = 0; i < $scope.headerYears.length; i++) {
          data.push({}); //initializing structure based on headerYears
          for (var j = 0; j < col.length; j++) {
              if (col[j].Y == $scope.headerYears[i]) {
                  data[i] = col[j]; //replacing dummy value with actual data
              }
          }
      }
      return data;
  };

  var rows = new Array();

  for (var x = 0; x < raw.length; x++) {
    var row = raw[x];
    row.Col = bucketize(row.Col); //sorting and formatting data for intended HTML        
    rows.push(row);
  }

  $scope.rows = rows; //providing cleansed data to Angular
})();
//END OF FUNCTIONAL CODE

--UPDATE--

An infinite digest loop occurs because a new Array() is returned every time the bucketize() function is called. To avoid this, scrub the data before passing it to Angular (refer to the above section). This can be done in an AJAX success handler or within a SEAF function like demonstrated earlier.

//CAUTION: AVOID INFINITE LOOP BY ELIMINATING "new Array();"
...
<td ng-repeat="item in bucketize(row.Col)">{{item.Y}}</td>
...
$scope.bucketize = function(col) {
    var data = new Array();
    for (var i = 0; i < $scope.headerYears.length; i++) {
        data.push({}); //initializing structure based on headerYears
        for (var j = 0; j < col.length; j++) {
            if (col[j].Y == $scope.headerYears[i]) {
                data[i] = col[j]; //replacing dummy value with real data
            }
        }
    }
    return data;
};
//END OF AVOIDABLE CODE

Kieron

Answer 6

This method is much more efficient than creating a custom filter for each value you want to display. By using {{item.myProperty}} within the TD, you can insert any HTML you desire. Enjoy!

It organizes your data to align with the headers, allowing JavaScript to perform optimally and providing clean data to Angular. I hope this explanation is helpful!

//BEGINNING OF FUNCTIONAL CODE
$scope.rows = null;

(function(){
  var raw = [{ /** all existing "rows" data has been transferred here**/ }];

  var bucketize = function(col) {
      var data = new Array();
      for (var i = 0; i < $scope.headerYears.length; i++) {
          data.push({}); //initializing structure based on headerYears
          for (var j = 0; j < col.length; j++) {
              if (col[j].Y == $scope.headerYears[i]) {
                  data[i] = col[j]; //replacing dummy value with actual data
              }
          }
      }
      return data;
  };

  var rows = new Array();

  for (var x = 0; x < raw.length; x++) {
    var row = raw[x];
    row.Col = bucketize(row.Col); //sorting and formatting data for intended HTML        
    rows.push(row);
  }

  $scope.rows = rows; //providing cleansed data to Angular
})();
//END OF FUNCTIONAL CODE

--UPDATE--

An infinite digest loop occurs because a new Array() is returned every time the bucketize() function is called. To avoid this, scrub the data before passing it to Angular (refer to the above section). This can be done in an AJAX success handler or within a SEAF function like demonstrated earlier.

//CAUTION: AVOID INFINITE LOOP BY ELIMINATING "new Array();"
...
<td ng-repeat="item in bucketize(row.Col)">{{item.Y}}</td>
...
$scope.bucketize = function(col) {
    var data = new Array();
    for (var i = 0; i < $scope.headerYears.length; i++) {
        data.push({}); //initializing structure based on headerYears
        for (var j = 0; j < col.length; j++) {
            if (col[j].Y == $scope.headerYears[i]) {
                data[i] = col[j]; //replacing dummy value with real data
            }
        }
    }
    return data;
};
//END OF AVOIDABLE CODE

Kieron

Fill a table using ng-repeat and verify that the header data matches

Answer №1

Answer №2

Answer №3

Similar questions

A div element springs forth into a new window and seamlessly transitions back to its original position with fresh content

In order of service - avoid repeating the initial service upon the next user click if the second service was unsuccessful

Issue with displaying Images on Datatables using Javascript

Getting JSON data from an Angular JS controller can be achieved by utilizing the built-in

guide for interpreting a complex json structure

To navigate to a personalized HTML page from a different custom creation

Google App Engine does not properly interpret PHP code when making AJAX requests

Having trouble with material-ui installation in React, Redux, and React-Router project

If the URL Element is Present in the IMG SRC

Ways to retrieve various JSON arrays in Javascript

Is there a way to access the filtered or organized rows in the Quasar Q-Table?

Implement the LinkedIn API within an AngularJS application

Is it possible to generate a unique name from an array without any repeats?

What is the method for invoking an Angular controller function with a parameter value that has been freshly displayed on the current view?

React - Paths of images converting to relative when directly accessed via the address bar

jQuery: changing the order of list elements with the eq method

Decoding the file's encoding: A beginner's guide

Exploring the potential of VSCode's RegEx search and replace

Stopping the parent from triggering jQuery

Deleting a key from one object will also remove that key from another object - JavaScript