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

AJAX request post parameters not recognized in ColdFusion form scope

Is there a way to adjust a 5-minute countdown interval timer by 1 minute in a react JS application?

What steps are involved in generating a scene dynamically with A-Frame?

Switch the dropdown selection depending on the checkbox status

Nightwatch is a tool that allows you to interact with elements on a webpage by clicking on an element within

When using express, it is important to note that parameters cannot be accessed directly through the request.body

Repeated calls to Angular's <img [src]="getImg()"> frequently occur

Display labels for each tick on the Kendo slider in AngularJS

Discovering the Nearest Textfield Value Upon Checkbox Selection Using JQuery

Angular 5 - Creating a dynamic function that generates a different dynamic function

Determining the Testing Status of a Node Package Management (NPM) Package

Successive promises of catches

Validation customized through offspring control

Are there any alternatives to jQuery address in the realm of dojo?

Upon the second click, the addEventListener function is triggered

Is it possible that $watch does not function properly for instantaneous statements?

Transferring session data through AJAX in PHP

Node.js: Extracting parameters from the URL

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

unable to respond when clicking an angularjs link