1

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.

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Rashmi Ranjan Sahu
  • 15
  • 5

1 Answers1

2

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

Alex Paramonov
  • 2,630
  • 2
  • 23
  • 27
  • if the data is like this $scope.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' },{ location:'y', id:5, name:'E' }]; }); – Rashmi Ranjan Sahu Nov 03 '15 at 09:47
  • In this case can we use rowspan?.. because y should align to 4 and x should display between 1 and 2. – Rashmi Ranjan Sahu Nov 03 '15 at 10:07
  • Then you will have to count the number of locations with the same value before displaying the data, and then add rowspan with that value. – Alex Paramonov Nov 03 '15 at 10:11
  • Ya i can count the no of location and send to html..but not able to put the different count .Can you do it for hard coded rowspan 2,3,4....... json data: $scope.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' }, { location:'y', id:5, name:'E' }, { location:'z', id:6, name:'E' }, { location:'z', id:7, name:'E' }, { location:'z', id:8, name:'E' }, { location:'z', id:9, name:'E' }, ]; – Rashmi Ranjan Sahu Nov 03 '15 at 10:23
  • See my update, made several fixes and optimizations, now it should work properly with any number of same locations. – Alex Paramonov Nov 03 '15 at 11:06
  • Thank you ..i got the soln. – Rashmi Ranjan Sahu Nov 03 '15 at 11:38