Display data in a table by grouping them horizontally

Question

I have some data that has the following format:

[name:'Name1', speed:'Val1', color:'Val2']
[name:'Name2', speed:'Val4', color:'Val5']
[name:'Name3', speed:'Val6', color:'Val7']

That I want to display in a table like this:

       |Name1|Name2|Name3|
       ______|_____|______
speed |Val1 |Val4 |Val6
color |Val2 |Val5 |Val7

What I tried to do is group my data like this in the controller:

$scope.data = {
    speeds: [{
      ...
    },{
      ...
    },{
      ...
    }],
    colors: [{
      ...
    },{
      ...
    },{
      ...
    }],
  };

But I am not sure what to put inside the empty areas, because all values there represent the values of the 'val1' variable for all Names (Accounts), and my tests until now keep failing.

You can imagine this as some sort of a comparisons matrix, that is used in order to see the all the values of the same variable across different accounts.

How can I represent the data in my model in order for me to successfully display them in a table as explained?

Edit My difficulty lies in the fact that you create a table by going from row to row, so my html looks something like this:

  <table md-data-table class="md-primary" md-progress="deferred">
    <thead>
      <tr>
        <th ng-repeat="header in headers">                
          {{header.value}}              
        </th>
      </tr>
    </thead>
    <tbody>
      <tr md-auto-select ng-repeat="field in data">                
        <td ng-repeat="var in field">{{var.value}}</td>               
      </tr>
    </tbody>
  </table>

So as you can see I have a loop for each row, and a loop for each value of each row. This would be easier if I wanted to display the data horizontally, but I want the data vertically. So if we where talking about cars, we would have the car models as headers, and their respective characteristics(speed, color, etc) in each row.

I wouldn't worry about changing the data to fit the format. Change the format to fit the data. See the accepted answer to this question: http://stackoverflow.com/questions/16918094/html-table-with-vertical-row — JD Angerhofer, Aug 05 '15 at 13:46
Let me know if it doesn't make sense or doesn't work as expected. I can't do it right now, but later today I can write out a quick demo using the dummy data you posted above! — JD Angerhofer, Aug 05 '15 at 14:04
I think I got it and its a nice approach, but still I cant make it work because the data are in different variables in the scope, and I can only iterate through one of them. Or I am making this overly complicated because I am tired .) — dearn44, Aug 05 '15 at 14:12

Ori Drori · Answer 1 · 2015-08-05T14:49:15.557

If this is your basic structure:

var cols = [{name:'Name1', val1:'Val1', val2:'Val2'},
            {name:'Name2', val1:'Val4', val2:'Val5'},
            {name:'Name3', val1:'Val6', val2:'Val7'}];

This code

$scope.table = cols.reduce(function(rows, col) {
    rows.headers.push({ value: col.name });
    rows.data[0].push({ value: col.speed });
    rows.data[1].push({ value: col.color });
    return rows;
}, {headers:[], data:[[], []]});

will give you this structure for $scope.table:

$scope.table = {
    headers : [{
            value : "Name1"
        }, {
            value : "Name2"
        }, {
            value : "Name3"
        }
    ],
    data : [
        [{
                value : 'val1'
            }, {
                value : 'val4'
            }, {
                value : 'val6'
            }
        ],
        [{
                value : 'val2'
            }, {
                value : 'val5'
            }, {
                value : 'val17'
            }
        ]
    ]
};

  <table md-data-table class="md-primary" md-progress="deferred">
    <thead>
      <tr>
        <th ng-repeat="header in table.headers">                
          {{header.value}}              
        </th>
      </tr>
    </thead>
    <tbody>
      <tr md-auto-select ng-repeat="field in table.data">                
        <td ng-repeat="var in field">{{var.value}}</td>               
      </tr>
    </tbody>
  </table>

I am not sure this is exactly what I want, maybe the edit helps you. — dearn44, Aug 05 '15 at 14:01
I will have to try this but I am up voting because of the very interesting info in here, but in any case lets say that I am iterating through each row. How can I tell Angular to move to the next set of value when there are no names? — dearn44, Aug 05 '15 at 14:41

ArBro · Accepted Answer · 2015-08-06T08:36:17.823

0

You could try this:

HTML

<table ng-app="myTable" ng-controller="myTableCtrl">
    <thead>
        <tr>
            <th ng-repeat="car in cars">{{car.name}}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td ng-repeat="car in cars">{{car.speed}}</td>
        </tr>
        <tr>
            <td ng-repeat="car in cars">{{car.color}}</td>
        </tr>
    </tbody>

</table>

JS

angular.module("myTable",[])
.controller("myTableCtrl", function($scope) {
    $scope.cars = [
    {
        name:'Name1', 
        speed:'Val1', 
        color:'Val2'
    },
    {
        name:'Name2', 
        speed:'Val4', 
        color:'Val5'
    },
    {
        name:'Name3', 
        speed:'Val6', 
        color:'Val7'
    }
]
});

https://jsfiddle.net/ABr/ms91jezr/

edited Aug 06 '15 at 08:36

answered Aug 05 '15 at 14:49

ArBro

731
5
18

This is good for the case where I have only two variables as in the example, but if you notice at what I was trying to do you will notice that I was going for the more general case of having the number of rows defined in a loop. This is why I said that this is kind of hard because if I am on a loop then I cant get the .speed, .color or whatever other names are there. – dearn44 Aug 05 '15 at 15:15
As far as I know doing ` {{car.{{field.name}}}} ` – dearn44 Aug 05 '15 at 15:29
Scratch that, you can actually. `{{car[field.name]}}` – dearn44 Aug 05 '15 at 15:44

Display data in a table by grouping them horizontally

2 Answers2