CODEWITHSUNDEEP
htmljsonangularjs
Rashmi Ranjan Sahu
Rashmi Ranjan Sahu

Reputation: 15

rowspan for json data in angularjs

Json data:-

[{
    location: x,
    id: 1,
    name: A
  },
  {
    location: x,
    id: 2,
    name: B
  },
  {
    location: y,
    id: 3,
    name: C
  },
  {
    location: y,
    id: 4,
    name: D
  }
]

I want the output in this format:

+----------+------+------+
| location |  id  | name |
+----------+------+------+
|          |   1  |  A   |
|    x     +------+------+
|          |   2  |  B   |
+----------+------+------+
|          |   3  |  C   |
|    y     +------+------+
|          |   4  |  D   |
+----------+------+------+

In Angular JS how can i get this type of output.

Upvotes: 1

Views: 849

Answers (1)

Alex Paramonov
Alex Paramonov

Reputation: 2730

You should count the number of same locations before displaying the data.

var localData = [

    { location:'x', id:1, name:'A' },
    { location:'x', id:2, name:'B' }, 
    { location:'y', id:3, name:'C' }, 
    { location:'y', id:4, name:'D' },
    { location:'y', id:5, name:'E' },
    { location:'z', id:6, name:'F' },
  ],
  i, j;

  for(i = 0; i < localData.length; i++){
      var l1 = localData[i].location;

      localData[i].rowspan = 1;

      for(j = i+1; j < localData.length; j++){
        var l2 = localData[j].location;
        if(l1 == l2){
          localData[i].rowspan += 1;
        }
        else{
          break;
        }
      }
      i = j-1;
  }
$scope.data = localData;

Table:

 <table border="1" cellpadding="15">
     <tr ng-repeat="row in data">
      <td ng-if="row.rowspan" rowspan={{row.rowspan}}>{{row['location']}} </td>
      <td>{{row['id']}}</td>
      <td>{{row['name']}}</td>
     </tr>
 </table>

Here is a working plunker:

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

Upvotes: 2

Related Questions