Angularjs Create Table Ng-Repeat with json data

Question

I'm very new to angular js. My task is to create an html table from the JSON data from a web service.

JSON data will be like:

[{"StartTime":"07:00","Name":"xxxxxxxx","Slots":["07:00","07:15"]},{"StartTime":"07:30","Name":"xxxxxxxx","Slots":["07:30"]}]

Slots length will tell us how many rows to be merge.

Table should be like:

*-------------------------------*
| Time  |  Name                 |
*-------*-----------------------*
| 07:00 | xxxxxxxxxxx           |
|-------|                       |
| 07:15 |                       |
|-------|-----------------------|
| 07:30 | xxxxxxxxxxxxxx        |
|-------|-----------------------|

Show us what you have tried and what problems you have encountered — charlietfl
– charlietfl, Commented Dec 25, 2014 at 12:04
@SindhuVinodhini StackOverflow is meant for solving your doubts, please post what you have tried and where are you stuck. — Vivek Todi
– Vivek Todi, Commented Dec 25, 2014 at 12:56

A.B · Accepted Answer · 2015-05-18 14:09:37Z

I have edited your json, which was not valid. you can see in js or json object valiadator

Working Demo:

angular.module('testApp',[]).controller('testCtrl', function($scope) {
  $scope.items=[
{"StartTime":"07:00","Name":"xxxxxxxx","Slots":["07:00","07:15"]},
{"StartTime":"07:30","Name":"xxxxxxxx","Slots":["07:30"]}];
  });

div.col {
  background:pink; 
  border-bottom:1px dotted black;
  padding:2px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
   <table border="2">
      <tr>
         <td>Time</td>
         <td>Name</td>
      </tr>
      <tr ng-repeat="item in items">
         <td >
             <div class="col" ng-repeat="i in item.Slots"> {{i}}</div>
         </td>
          <td >{{item.Name}}</td>
       </tr>
 </table>

Wayne Ellery · Accepted Answer · 2014-12-25 12:54:06Z

It was quite tricky to do it with just a table alone with rowspan. You have to use ng-repeat-start/end. I also used $first to skip the first row of the nested repeat.

<table border="1">
  <thead>
    <tr>
      <th>Time</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat-start="item in array">
      <td>{{item.Slots[0]}}</td>
      <td rowspan="{{item.Slots.length}}">{{item.Name}}</td>
    </tr>
    <tr ng-repeat="slot in item.Slots" ng-if="!$first" ng-repeat-end>
      <td>{{slot}}</td>
    </tr>
  </tbody>
</table>

td {
    vertical-align: top;
}

http://plnkr.co/edit/FsjCt2un618tVEBsGk7N?p=preview

Collectives™ on Stack Overflow

Angularjs Create Table Ng-Repeat with json data

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related