modelling data from rows to columns in Angular dynamically

Question

I have data that looks like this:

$scope.items =[{name: "item1", year : "2013", value : "100"},
    {name: "item1", year : "2012", value : "97"},
    {name: "item1", year : "2011", value : "98" },
    {name: "item2", year : "2013", value : "-7" },
    {name: "item2", year : "2012", value : "-6" },
    {name: "item2", year : "2011", value : "-5" },
    {name: "item3", year : "2013", value : "93" },
    {name: "item3", year : "2013", value : "91" },
    {name: "item3", year : "2012", value : "93" },
    {name: "item4", year : "2013", value : "-35" },
    {name: "item4", year : "2012", value : "-36" },
    {name: "item4", year : "2011", value : "-37" },
    {name: "item5", year : "2013", value : "58" },
    {name: "item5", year : "2012", value : "55" },
    {name: "item5", year : "2011", value : "56" }]

I want to render the data as such:

Name  2011 2012 2013
item1   98   97  100
item2   -5   -6   -7
tiem3   93   91   93
item4  -35  -36  -37
item5   58   55   56

How can I achieve this using Angular? I understand the basics of ngRepeat but if I do ng-repeat = "(key, value) in items" and then value.name or value.year I have 15 instances of them instead of just item1 to item 5 and 2011, 2012 and 2013. Ideally I would like to have one loop that gives the years for the columns headers and one other loop that gives me the list of items for the rows, then i would reference the values by rows, columns. Any ideas?

Is it ok to change the json layout? If not: You'll need to get all distinct years for header column, and then group your itemlist on name. — Zaphod
– Zaphod, Commented Aug 25, 2014 at 10:25
I would prefer not too, that's more or less how I receive the data from the server/database. But I might do different requests for different years, it might help in the structuring by year, i still need to group by item afterwards nevertheless. — Bondifrench
– Bondifrench, Commented Aug 25, 2014 at 22:50

Marinos An · Accepted Answer · 2014-08-25 10:48:19Z

1

You can use _lodash to get helped.

script:

var app = angular.module('app',[]);
app.controller('TestCtrl',['$scope',function($scope){
  var items =[{name: "item1", year : "2013", value : "100"},
      {name: "item1", year : "2012", value : "97"},
      {name: "item1", year : "2011", value : "98" },
      {name: "item2", year : "2013", value : "-7" },
      {name: "item2", year : "2012", value : "-6" },
      {name: "item2", year : "2011", value : "-5" },
      {name: "item3", year : "2013", value : "93" },
      {name: "item3", year : "2013", value : "91" },
      {name: "item3", year : "2012", value : "93" },
      {name: "item4", year : "2013", value : "-35" },
      {name: "item4", year : "2012", value : "-36" },
      {name: "item4", year : "2011", value : "-37" },
      {name: "item5", year : "2013", value : "58" },
      {name: "item5", year : "2012", value : "55" },
      {name: "item5", year : "2011", value : "56" }]


      $scope.headCells = _.keys(_.groupBy(items, function(item){ return item.year}));
      $scope.rows = _.groupBy(items, function(item){ return item.name});

      $scope.sortByYearProp = function(values){
        return _.sortBy(values, function(value){
          return value.year;
        });
      }

}])

html:

<table ng-controller="TestCtrl as test">
  <tr><th>Name</th><th ng-repeat="year in headCells">{{year}}</th></tt>
  <tr ng-repeat="(itemName, value) in rows"><td>{{itemName}}</td><td ng-repeat="obj in sortByYearProp(value)">{{obj.value}}</td></tr>
</table>

http://plnkr.co/edit/zvX6bsqicS5flD7BXzzN

answered Aug 25, 2014 at 10:48

Marinos An

11.3k7 gold badges78 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bondifrench Over a year ago

It seems like a good idea, i use lodash in other things already. I was just wondering if there was another directive or function in Angular that would do that. If I don't get other answers, I'll definitely accept yours.

Collectives™ on Stack Overflow

modelling data from rows to columns in Angular dynamically

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related