Utilizing ngRepeat to build intricate rows within a table

Question

Utilizing ngRepeat to build intricate rows within a table

I have a unique collection that appears as follows:

{
    "10": {},
    "12": {
        "20": {
            "value": 1,
            "id": 1,
        },
        "100": {
            "value": 12,
            "id": 1,
        }
    },
    "14": {
        "100": {
            "value": 14,
            "id": 2,
        }
    },
    "16": {},
    "18": {},
    "20": {
        "100": {
            "value": 23,
            "id": 1,
        },
        "150": {
            "value": 56,
            "id": 3,
        }
    },
    "22": {},
    "24": {},
    "26": {
        "50": {
...

I aim to design a table based on this assortment that will resemble this:

https://i.sstatic.net/1B50v.png

Although unsure on the correct combination of repetitions to use for creating this table. I'm presently experimenting with this approach:

<table>
    <thead>
        <tr>
            <th>type</th>
            <th>module</th>
            <th>value</th>
            <th>id</th>
        </tr>
    </thead>
    <tbody>

        <tr ng-repeat-start="(row1, value1) in TestData">
            <td rowspan="{{value1.length}}">{{row1}}</td>
            <td ng-repeat="(label2, value2) in value1">{{label2}}</td>
        </tr>
    </tbody>
</table>

javascript angularjs

Answer 1

Answer №1

Upon initial inspection, one could achieve this by incorporating a <tbody> tag (additional details can be found here: Angular.js ng-repeat across multiple tr's)

var myAppModule = angular.module('myApp', []).controller('MyController', MyController);

function MyController() {

  // https://stackoverflow.com/questions/1345939/how-do-i-count-a-javascript-objects-attributes
  this.objectCount = function(obj) {
    return Object.keys(obj).length;
  }

  this.data = {
    "10": {},
    "12": {
      "20": {
        "value": 1,
        "id": 1,
      },
      "100": {
        "value": 12,
        "id": 1,
      },
      "200": {
        "value": 120,
        "id": 10,
      }
    },
    "14": {
      "100": {
        "value": 14,
        "id": 2,
      }
    },
    "16": {},
    "18": {},
    "20": {
      "100": {
        "value": 23,
        "id": 1,
      },
      "150": {
        "value": 56,
        "id": 3,
      }
    },
    "22": {},
    "24": {}
  };

}

table,
th,
td {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController as ctrl">
  <table>
    <thead>
      <tr>
        <th>type</th>
        <th>module</th>
        <th>value</th>
        <th>id</th>
      </tr>
    </thead>
    <tbody ng-repeat="(row1, value1) in ctrl.data" ng-switch="ctrl.objectCount(value1) === 0">
      <tr ng-switch-when="true">
        <td>{{row1}}</td>
        <td colspan="3"></td>
      </tr>
      <tr ng-switch-when="false" ng-repeat="(row2, value2) in value1">
        <td ng-if="$index === 0" rowspan="{{ctrl.objectCount(value1)}}">
          {{row1}}
        </td>
        <td>{{row2}}</td>
        <td>{{value2.value}}</td>
        <td>{{value2.id}}</td>
      </tr>
    </tbody>
  </table>
</div>

If a more sophisticated solution involving row and column merging is needed, considering structuring the data objects in a way that simplifies the template, allowing the business logic to be handled in JavaScript.

Answer 2

Upon initial inspection, one could achieve this by incorporating a <tbody> tag (additional details can be found here: Angular.js ng-repeat across multiple tr's)

var myAppModule = angular.module('myApp', []).controller('MyController', MyController);

function MyController() {

  // https://stackoverflow.com/questions/1345939/how-do-i-count-a-javascript-objects-attributes
  this.objectCount = function(obj) {
    return Object.keys(obj).length;
  }

  this.data = {
    "10": {},
    "12": {
      "20": {
        "value": 1,
        "id": 1,
      },
      "100": {
        "value": 12,
        "id": 1,
      },
      "200": {
        "value": 120,
        "id": 10,
      }
    },
    "14": {
      "100": {
        "value": 14,
        "id": 2,
      }
    },
    "16": {},
    "18": {},
    "20": {
      "100": {
        "value": 23,
        "id": 1,
      },
      "150": {
        "value": 56,
        "id": 3,
      }
    },
    "22": {},
    "24": {}
  };

}

table,
th,
td {
  border: 1px solid black;
}
table {
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController as ctrl">
  <table>
    <thead>
      <tr>
        <th>type</th>
        <th>module</th>
        <th>value</th>
        <th>id</th>
      </tr>
    </thead>
    <tbody ng-repeat="(row1, value1) in ctrl.data" ng-switch="ctrl.objectCount(value1) === 0">
      <tr ng-switch-when="true">
        <td>{{row1}}</td>
        <td colspan="3"></td>
      </tr>
      <tr ng-switch-when="false" ng-repeat="(row2, value2) in value1">
        <td ng-if="$index === 0" rowspan="{{ctrl.objectCount(value1)}}">
          {{row1}}
        </td>
        <td>{{row2}}</td>
        <td>{{value2.value}}</td>
        <td>{{value2.id}}</td>
      </tr>
    </tbody>
  </table>
</div>

If a more sophisticated solution involving row and column merging is needed, considering structuring the data objects in a way that simplifies the template, allowing the business logic to be handled in JavaScript.

Utilizing ngRepeat to build intricate rows within a table

Answer №1

Similar questions

NextJs getStaticPaths function is failing to render the correct page, resulting in a 404 error message being displayed

jsp fullcalendar select not functioning properly

Increasing the margin-left automatically in Bootstrap 3.0.0

Tips for testing "defineAsyncComponent" in Vue 3:

Preventing default behavior in a JQuery post request

What is the best way for Laravel to utilize the information provided via an Angular Ajax post request

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

Image proxy in Node.js

Creating dynamic templates for table rows in AngularJS directives

Tips for adding a picture to a server and applying CSS filters to enhance it

AngularJS - varying actions based on which input field I interacted with first

Enhance the functionality of the custom transaction form in NetSuite by incorporating new actions

Angular parent scope does not reflect changes when a directive updates the shared scope variable

Tips for implementing ajax and codeigniter to load additional comments on a web page

Why is my return statement in JavaScript Nextjs mapping values twice?

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

Instructions for displaying a React component in the <main> element when employing react-burger-menu

Retrieving information from a PHP server using AJAX

What is the best way to manage the 'content' attribute in TSX?

What is the best way to conceal text that is not enclosed in <p> or <span> tags?