Can someone please explain how to create a nested table within a single column in Angular JS when it contains a list of values?

Question

Can someone please explain how to create a nested table within a single column in Angular JS when it contains a list of values?

index.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.data =[{"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
{"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}]
  $scope.cols = Object.keys($scope.data[0]);

  $scope.notSorted = function(obj){
    if (!obj) {
        return [];
    }
    return Object.keys(obj);
}
});

index.html

<table border=1>
      <thead>
        <tr>
          <th ng-repeat="key in notSorted(cols)" ng-init="value=cols[key]">{{value}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in data">
          <td ng-if="!$last" ng-repeat="dat in notSorted(row)" ng-init="value=row[dat]">{{value}}</td>
        </tr>
      </tbody>
    </table>

The table generated is perfect, but there is an issue with the column MyValues. I have a list of data and would like to create a nested table with all list values.

How can this be achieved? I want to identify if any column contains a list and if so, then generate a nested table. You can check out this plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

javascript asp.net-mvc angularjs angularjs-scope angularjs-ng-repeat

Answer 1

Answer №1

Here is an example of how you can structure your markup:

<table>
  <thead>
    <tr>
      <th ng-repeat="(k,v) in data[0]">{{k}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
        <table ng-if="isArr">
          <thead>
            <tr>
              <th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
            </tr> 
          </thead>
          <tbody>
            <tr ng-repeat="sub in value">
              <td ng-repeat="(sk, sv) in sub">{{sv}}</td>
            </tr>
          </tbody>
        </table>
        <span ng-if="!isArr">{{value}}</span>
      </td>
    </tr>
  </tbody>
</table>

To view the full code, visit: https://gist.github.com/anonymous/487956892d760c17487c

Answer 2

Here is an example of how you can structure your markup:

<table>
  <thead>
    <tr>
      <th ng-repeat="(k,v) in data[0]">{{k}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td ng-repeat="(prop, value) in item" ng-init="isArr = isArray(value)">
        <table ng-if="isArr">
          <thead>
            <tr>
              <th ng-repeat="(sh, sv) in value[0]">{{sh}}</th>
            </tr> 
          </thead>
          <tbody>
            <tr ng-repeat="sub in value">
              <td ng-repeat="(sk, sv) in sub">{{sv}}</td>
            </tr>
          </tbody>
        </table>
        <span ng-if="!isArr">{{value}}</span>
      </td>
    </tr>
  </tbody>
</table>

To view the full code, visit: https://gist.github.com/anonymous/487956892d760c17487c

Answer 3

Answer №2

I'm not entirely certain about the outcome you are aiming for, but here are some suggestions that might inspire you.

Check out: http://example.com/edit/abcd1234

script.js

let app = angular.module('exampleApp', []);

app.controller('MainController', function($scope) {
  $scope.name = 'World';
  $scope.data = [
    {"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
    {"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}
  ];
  $scope.cols = Object.keys($scope.data[0]);

  $scope.notOrdered = function(obj){
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }  
});

page.html

<table border=1>
  <thead>
    <tr>
      <th ng-repeat="key in notOrdered(cols)" ng-init="value=cols[key]">{{value}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in data">
      <td ng-if="!$last" ng-repeat="dat in notOrdered(row)" ng-init="value=row[dat]">
        <div ng-if="value[0].Id">
          <table>
            <tr>
              <td>Id:</td><td>{{value[0].Id}}</td>
            </tr>
            <tr>
              <td>Value:</td><td>{{value[0].Value}}</td>
            </tr>
          </table>
        </div>
        <div ng-if="!(value[0].Id)">
          {{value}}
        </div>
      </td>
    </tr>
  </tbody>
</table>

If you want to make it more flexible, consider using something like

<div ng-if="angular.isArray(value)">

instead of <div ng-if="value[0].Id">. I didn't have time to test this approach, but it's worth exploring further.

Answer 4

I'm not entirely certain about the outcome you are aiming for, but here are some suggestions that might inspire you.

Check out: http://example.com/edit/abcd1234

script.js

let app = angular.module('exampleApp', []);

app.controller('MainController', function($scope) {
  $scope.name = 'World';
  $scope.data = [
    {"Id":1,"Title":"en-US","Description":"UnitedStates","MyValues":[{"Id":100,"Value":"Save"}]},
    {"Id":1,"Title":"en-UK","Description":"UK","MyValues":[{"Id":102,"Value":"Delete"}]}
  ];
  $scope.cols = Object.keys($scope.data[0]);

  $scope.notOrdered = function(obj){
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }  
});

page.html

<table border=1>
  <thead>
    <tr>
      <th ng-repeat="key in notOrdered(cols)" ng-init="value=cols[key]">{{value}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in data">
      <td ng-if="!$last" ng-repeat="dat in notOrdered(row)" ng-init="value=row[dat]">
        <div ng-if="value[0].Id">
          <table>
            <tr>
              <td>Id:</td><td>{{value[0].Id}}</td>
            </tr>
            <tr>
              <td>Value:</td><td>{{value[0].Value}}</td>
            </tr>
          </table>
        </div>
        <div ng-if="!(value[0].Id)">
          {{value}}
        </div>
      </td>
    </tr>
  </tbody>
</table>

If you want to make it more flexible, consider using something like

<div ng-if="angular.isArray(value)">

instead of <div ng-if="value[0].Id">. I didn't have time to test this approach, but it's worth exploring further.

Can someone please explain how to create a nested table within a single column in Angular JS when it contains a list of values?

Answer №1

Answer №2

Similar questions

Having trouble aligning input fields and buttons using Angular

Is it possible to view the frames/packets being transmitted from an EJS or HTML form to the Express backend using Express Js?

Eliminating characteristics and rejuvenating the component

Preventing a web component from loading in Angular until its template is fully populated

Displaying the information of one formgroup inside another formarray

Incorporate content upon button click using Javascript

AngularJS: Service variable not triggering $watch when updated within a directive's call

What steps can be taken to verify values using the console bind function?

Error in TypeScript when using Google Maps React with Next.js: there is a possibility that infoWindow.close is undefined

What is the correct way to invoke a function contained within an object that is stored in an array?

What causes a delay of one iteration in the $location.search method when used within the _.debounce() function in lodash?

AWS Lambda encountered an issue: Task terminated unexpectedly prior to finishing the operation

Tips for incorporating AJAX loaded content with an AngularJS expression using jQuery

Express app issues error: JSON response not returned properly - Uncaught SyntaxError: Unexpected end of data

Choose a particular JSON dataset when clicking on it

Exploring Typescript's ability to recursively deduce object attributes

Loading JS and CSS files in relation to the website root directory

Customize the text that appears when there are no options available in an Autocomplete component using React

Switching Classes with a Click of a Button

Sending a POST request to a PHP file in React: A Step-by-Step Guide