CODEWITHSUNDEEP
javascriptangularjs
SQL and Java Learner
SQL and Java Learner

Reputation: 731

Create new rows for nested objects

I have found that ng-repeat-start and ng-repeat-end are available for this but they don't seem to be working. I have this structure:

Events Array: Object, Object, Object.

Each Event Object has properties: Start Time, End Time, User and Comments.

(Start Time, End Time and User has a string value while Comments is another array which contains Objects.)

Comments Array: Object, Object, Object.

Within the Comments Array each object has these properties: id and comment.

What I need to do is display every Event Object's Start Time, End Time, and User in a row. When I come across a Comment Array in the Event Object that has multiple Comment Objects, I want to display every id and comment in a NEW row.

<tbody>
      <tr ng-repeat-start="value in Events">
           <td>{{value.startTime}}</td>
           <td>{{value.endTime}}</td>
           <td>{{value.User}}</td>
       </tr>
       <tr ng-repeat-end="comments in value.Comments">
            <td>{{comments.id}}</td>
            <td>{{comments.comment}}</td>
       </tr>
 </tbody>

Any help would be great! I'm fairly new to JavaScript so any examples would be nice.

Upvotes: 1

Views: 161

Answers (3)

SQL and Java Learner
SQL and Java Learner

Reputation: 731

AngularJS documentation helped...

"The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed."

<tbody>
      <tr ng-repeat-start="value in Events">
           <td>{{value.startTime}}</td>
           <td>{{value.endTime}}</td>
           <td>{{value.User}}</td>
      </tr>
      <tr ng-repeat="comments in value.Comments">
            <td>{{comments.id}}</td>
            <td>{{comments.comment}}</td>
      </tr>
     <tr ng-repeat-end>
     </tr>
 </tbody>

Working Fiddle: http://jsfiddle.net/fqfh4cv6/

Upvotes: 0

Karen Grigoryan
Karen Grigoryan

Reputation: 5432

You can also try this.

angular
  .module('app', [])
  .controller('MainCtrl', function($scope) {
    // generating sample data
    $scope.Events = [...new Array(10)]
      .map(() => {
        const date = Date.now();
        return {
          startTime: `Start time: ${date}`,
          endTime: `End time: ${date + 500}`,
          User: `User: ${date}`,
          Comments: [...new Array(2)]
            .map(() => {
              return {
                id: `Comment id: ${date}`,
                comment: `Comment: ${date} bla bla`
              };
            })
        };
      });
  });
table {
  border: 1px solid;
  border-collapse: collapse;
}

td {
  border: 1px solid;
}

tr:nth-child(3n+1) td {
  background: blue;
  color: white;
}
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <table>
    <tbody>
      <tr ng-repeat-start="value in Events">
        <td>{{value.startTime}}</td>
        <td>{{value.endTime}}</td>
        <td>{{value.User}}</td>
      </tr>
      <tr ng-repeat-end ng-repeat="comment in value.Comments">
        <td>{{comment.id}}</td>
        <td colspan="2">{{comment.comment}}</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Lex
Lex

Reputation: 7194

You need to structure things a bit differently for this to work, but in so doing you'll find you don't need ng-repeat-start and ng-repeat-end. Instead put the ng-repeat on the <tbody> tag and then your nested ng-repeat on the second <tr> tag. Like so:

<tbody ng-repeat="value in Events">
      <tr>
           <td>{{value.startTime}}</td>
           <td>{{value.endTime}}</td>
           <td>{{value.User}}</td>
       </tr>
       <tr ng-repeat="comments in value.Comments">
            <td>{{comments.id}}</td>
            <td colspan="2">{{comments.comment}}</td>
       </tr>
 </tbody>

Upvotes: 2

Related Questions