Iterate through a generic array to populate a table using ng-repeat

Question

Iterate through a generic array to populate a table using ng-repeat

In the scenario I'm currently facing, I am working on creating a common reusable table structure using a directive. The goal is to display different JSON data in both the table header and body.

Below is the controller code:

angular.module('plunker', []);

function MainCtrl($scope) {
  $scope.firstJson=[{name:"abc1",empid:10215},{name:"abc2",empid:10216},{name:"abc3",empid:10217},{name:"abc4",empid:10218},{name:"abc5",empid:10219}];
  $scope.secondJson= [{product: "mobile", price: "10000"}, {product: "camera", price: "12000"}];
  $scope.name =  $scope.firstJson;
  $scope.tableHeading=["heading1","heading2","heading3"];
  $scope.toggle=true;
}

The directive code is as follows:

angular.module('plunker').directive('sampleDirective', function(){

  return {
    restrict: 'A',
    scope: {
      name: '=',
      tableHeading:'='
    },
    templateUrl: 'reverse_template.html',
    replace: true,
  };
});

To see a demo of this directive in action, you can visit the following Plunker link: Demo

Here are the final outputs for the firstJson and secondJson respectively: https://i.stack.imgur.com/XOnni.png, https://i.stack.imgur.com/AtgXU.png

Any assistance on this matter would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

The initial two arrays are the ones you provided, each with 2 columns.

To demonstrate its flexibility, I included a third array with 3 columns to show that it works seamlessly.

Regardless of the number of columns or rows, this solution will function effectively.

Tip: Remember to update the templateURL to the correct file and transfer the content within script ng-template to an external file.

… (the rest of the code remains unchanged)

Answer 2

The initial two arrays are the ones you provided, each with 2 columns.

To demonstrate its flexibility, I included a third array with 3 columns to show that it works seamlessly.

Regardless of the number of columns or rows, this solution will function effectively.

Tip: Remember to update the templateURL to the correct file and transfer the content within script ng-template to an external file.

… (the rest of the code remains unchanged)

Answer 3

Answer №2

If you're facing a problem, one solution is to separate column entries based on the keys of your array of objects and then display rows dynamically according to the columns. Here's an example of how you can achieve this:

Use the following code snippet for your directive:

return {
  restrict: 'A',
  scope: {
    columns: '=',
    rows   : '='
  },

  replace: true,

  link: function ($scope) {

    $scope.displayData = function (row, column) {
      return row[column];
    };
  }
};

Your HTML markup should resemble the following structure:

<tr>
  <th ng-repeat="column in columns">{{column}}</th>
</tr>
<tbody>
  <tr ng-repeat="row in rows">
    <td ng-repeat="column in columns>{{displayData(row, column)}}</td>
  </tr>
</tbody>

In your JavaScript file, consider defining it as follows:

function MainCtrl($scope) {
  $scope.rows = [
    {
      'column_1': 1,
      'column_2': 2,
      'column_3': 3
    },
    {
      'column_1': 1,
      'column_2': 2,
      'column_3': 3
    }
  ];

  $scope.columns = ['column_1', 'column_2', 'column_3']
}

A helpful tip - if you need to extract keys dynamically from an array of objects, simply take one item, retrieve its attributes, and assign them to $scope.columns.

For instance:

var extractAttributes = function (object) {
  var attrs = [];

  angular.forEach(object, function (value, key) {
    attrs.push(key);
  });

  return attrs;
}

Another useful tip - you can implement column separation within the directive by utilizing $watch to monitor changes in row data and extracting columns accordingly.

I hope this information proves helpful!

Answer 4

If you're facing a problem, one solution is to separate column entries based on the keys of your array of objects and then display rows dynamically according to the columns. Here's an example of how you can achieve this:

Use the following code snippet for your directive:

return {
  restrict: 'A',
  scope: {
    columns: '=',
    rows   : '='
  },

  replace: true,

  link: function ($scope) {

    $scope.displayData = function (row, column) {
      return row[column];
    };
  }
};

Your HTML markup should resemble the following structure:

<tr>
  <th ng-repeat="column in columns">{{column}}</th>
</tr>
<tbody>
  <tr ng-repeat="row in rows">
    <td ng-repeat="column in columns>{{displayData(row, column)}}</td>
  </tr>
</tbody>

In your JavaScript file, consider defining it as follows:

function MainCtrl($scope) {
  $scope.rows = [
    {
      'column_1': 1,
      'column_2': 2,
      'column_3': 3
    },
    {
      'column_1': 1,
      'column_2': 2,
      'column_3': 3
    }
  ];

  $scope.columns = ['column_1', 'column_2', 'column_3']
}

A helpful tip - if you need to extract keys dynamically from an array of objects, simply take one item, retrieve its attributes, and assign them to $scope.columns.

For instance:

var extractAttributes = function (object) {
  var attrs = [];

  angular.forEach(object, function (value, key) {
    attrs.push(key);
  });

  return attrs;
}

Another useful tip - you can implement column separation within the directive by utilizing $watch to monitor changes in row data and extracting columns accordingly.

I hope this information proves helpful!

Answer 5

Answer №3

My chosen method was as follows:

<div>
  Hello, {{name}} ,{{tableHeading}}

 <table ><tr><th ng-repeat="(key,value) in name[0]">{{key}}</th></tr><tbody><tr ng-repeat="names in name"><td ng-repeat="(key, value) in names">{{value}}</td></tr></tbody></table>

</div>

click here for more information

Answer 6

My chosen method was as follows:

<div>
  Hello, {{name}} ,{{tableHeading}}

 <table ><tr><th ng-repeat="(key,value) in name[0]">{{key}}</th></tr><tbody><tr ng-repeat="names in name"><td ng-repeat="(key, value) in names">{{value}}</td></tr></tbody></table>

</div>

click here for more information

Iterate through a generic array to populate a table using ng-repeat

Answer №1

Answer №2

Answer №3

Similar questions

What role does conditional logic play in the compile or link function of an AngularJS directive?

Tips for preventing text wrapping in off-canvas design

Executing a simulated onClick event in jQuery

Utilizing References in React Components

The document.getElementsByClassName method in JavaScript is returning an Array with a length property value of 0

The Angular Universal error arises due to a ReferenceError which indicates that the MouseEvent is not

What are the steps to effectively utilize <ul> for showcasing scrolling content?

Unable to utilize Socket.io version 2.0.3

Requiring addresses for Google Maps in order to display directions

Why does starting up the Firebase emulators trigger the execution of one of my functions as well?

Utilizing a dedicated settings configuration in a JSON file

Steps to generating a dynamic fabric canvas upon opening a new window

"Encountered an issue with combining multiple meshes that share the same geometry but have

Consistently receiving the identical result even when the checkbox remains unselected

Can we access local storage within the middleware of an SSR Nuxt application?

Executing multiple HTTPS requests within an Express route in a Node.js application

Angular displaying a slice of the data array

Refreshing a specific div within an HTML page

"Exploring the Power of TypeScript Types with the .bind Method

Achieving 10 touchdowns within a set of 5 plays during a football game