1

I'm trying some activities in AngularJS and wondering if it's possible to dynamically create a table using only an ng-repeat for table headers, an ng-repeat for rows, and an ng-repeat for fields in rows?

Essentially I'd like to say "for each property that exists in an instance of an object, print a new <\th>, for each object that exists in myArray, print a new <\tr>, and for each property that exists in each instance of each object, in each row, print a new <\td>.

Here's my controller:

var app=angular.module("app04",[]);

app.controller("Controller1",function(){
  this.name="ABCDEFGH";
  this.objectArray=[{name:"Jane Doe", email:"[email protected]", 
    phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },{name:"John Doe", email:"[email protected]", 
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
})

Here is the body:

<body>
  <h1>Hello Angular!</h1>
  <div ng-controller="Controller1 as con1">
    <table>
      <theader>
        <tr>

          <th ng-repeat="object in con1.objectArray[0]">
            {{Object.getOwnPropertyName(object)}}</th>
        </tr>
      </theader>
      <tbody>
        <tr ng-repeat="object in con1.objectArray">
          <td>{{object.name}}</td>
          <td>{{object.email}}</td>
          <td>{{object.phoneModel}}</td>
          <td>{{object.status}}</td>
          <td>{{object.purchaseDate}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

I was instructed to write out the headers, since it's a very basic tutorial (I'm only on the 4th video), but it seems more convenient and better for re-usability to try a small thought challenge and see if it would be possible to do something like what I'm trying above.

The problem is that Object.getOwnPropertyName and Object.keys doesn't seem to be working with this javascript, so I was wondering if I was doing this incorrectly, or if there is a better way of doing it. I was also wondering the community's thoughts on dynamically creating everything in the situation that I know all objects will contain the same properties?

3 Answers 3

2

The one way you could do it is like this:

var app=angular.module("app04",[]);

app.controller("Controller1",["$scope", function($scope){
  this.name="ABCDEFGH";
  this.objectArray=[{name:"Jane Doe", email:"[email protected]", 
    phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },{name:"John Doe", email:"[email protected]", 
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
}]);

<body>
  <h1>Hello Angular!</h1>
  <div ng-controller="Controller1 as con1">
    <table>
      <theader>
        <tr>

          <th ng-repeat="(key,value) in con1.objectArray[0]">
            {{key}}</th>
        </tr>
      </theader>
      <tbody>
        <tr ng-repeat="object in con1.objectArray">
          <td>{{object.name}}</td>
          <td>{{object.email}}</td>
          <td>{{object.phoneModel}}</td>
          <td>{{object.status}}</td>
          <td>{{object.purchaseDate}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

But I will now quote ng-repeat documentation from this link:

The JavaScript specification does not define the order of keys returned for an object, so Angular relies on the order returned by the browser when running for key in myObj. Browsers generally follow the strategy of providing keys in the order in which they were defined, although there are exceptions when keys are deleted and reinstated. See the MDN page on delete for more info.

Which basically means that the order of columns in your header is not guaranteed to be same as the order of data columns you expect:

   <td>{{object.name}}</td>
   <td>{{object.email}}</td>
   <td>{{object.phoneModel}}</td>
   <td>{{object.status}}</td>
   <td>{{object.purchaseDate}}</td>

For example if you define your con1.objectArray[0] like this:

{
  email:"[email protected]", 
  name:"Jane Doe", 
  phoneModel:"LG Optimus S", 
  status:"sad",
  purchaseDate:"2015-12-01"
}

On most browsers column order in the thead will be different then the expected one, the email will be first column, then name etc ...

But if you know that all your objects will be defined in the same order and you did not delete properties or do anything else that can affect the order of the properties in the object you can do something like this:

<table>
  <theader>
    <tr>
      <th ng-repeat="(key,val) in con1.objectArray[0]">{{key}}</th>
    </tr>
  </theader>
  <tbody>
    <tr ng-repeat="object in con1.objectArray">
      <td ng-repeat="(key,val) in object">{{object[key]}}</td>
    </tr>
  </tbody>
</table>

Which is IMO better than the first example as it will work in all browsers provided that you follow the constraint in bold text.

But the safest approach is that you simply define columns (property names) in the controller in an array which guarantees order on all browsers:

app.controller("Controller1",function(){
  this.name="ABCDEFGH";
  this.objectArray=[{name:"Jane Doe", email:"[email protected]", 
    phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },{name:"John Doe", email:"[email protected]", 
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  },{email:"[email protected]", name:"John Doe",
    phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
  this.columns = Object.getOwnPropertyNames(this.objectArray[0]); // or you can do it manually with array ['name', 'email', ...]
});

And then in HTML

<div ng-controller="Controller1 as con1">
<table border="1">
  <theader>
    <tr>
      <th ng-repeat="col in con1.columns">{{col}}</th>
    </tr>
  </theader>
  <tbody>
    <tr ng-repeat="object in con1.objectArray">
      <td ng-repeat="col in con1.columns">{{object[col]}}</td>
    </tr>
  </tbody>
</table>
</div>
2

Simply change your view to use (key,value) for iterating through object properties:

<body>
  <h1>Hello Angular!</h1>
  <div ng-controller="Controller1 as con1">
    <table>
      <theader>
        <tr>

          <th ng-repeat="(key,value) in con1.objectArray[0]">
            {{key}}</th>
        </tr>
      </theader>
      <tbody>
        <tr ng-repeat="object in con1.objectArray">
          <td>{{object.name}}</td>
          <td>{{object.email}}</td>
          <td>{{object.phoneModel}}</td>
          <td>{{object.status}}</td>
          <td>{{object.purchaseDate}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>
3
  • 1
    isn't the controller as notation now recommended for AngularJS?
    – stjepano
    Apr 11, 2016 at 14:07
  • @stjepano: Thank you for your contribution. I added the con1. to the view references Apr 11, 2016 at 14:10
  • 1
    but if you use controller as then you should not assign to $scope
    – stjepano
    Apr 11, 2016 at 14:12
-1

You are nearly there, this is one way:

Clear up your controller and separate the header and data objects:

var app=angular.module("app04",[]);

app.controller("Controller1",function(){
  this.name="ABCDEFGH";

  this.tableHeaders = ["header1", "header2, "header3"... etc]

  this.objectArray=[
      {name:"Jane Doe", email:"[email protected]", phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
  },
      {name:"John Doe", email:"[email protected]", phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
  }];
})

<div ng-controller="Controller1 as con1">
<table>
  <theader>
    <tr>

      <th ng-repeat="object in con1.tableHeaders">
        {{object}}</th>
    </tr>
  </theader>
  <tbody>
    <tr ng-repeat="object in con1.objectArray">
      <td>{{object.name}}</td>
      <td>{{object.email}}</td>
      <td>{{object.phoneModel}}</td>
      <td>{{object.status}}</td>
      <td>{{object.purchaseDate}}</td>
    </tr>
  </tbody>
</table>

2
  • The question was how to dynamically show the header titles in the table header, entering the titles into an array doesn't answer the question. Apr 11, 2016 at 14:19
  • @KieranDotCo - he's also mentioned "I know all objects will contain the same properties".. There is no need to dynamically create it if he knows this.
    – Oam Psy
    Apr 11, 2016 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.