How to display Object as complex html table in angularjs

Question

I have below object that I want to display as per below template. Can anyone please guide me in this? I want it to be optimized simple and quick.

Thanks in Advance.

Object:

var dataSource =  [
    {
        Id: 5,
        CriteriaName: 'First Criteria',
        CustomerName: 'Customer-1',
        Points: 350, Total: 500
    },
    {
        Id: 5,
        CriteriaName: 'First Criteria',
        CustomerName: 'Customer-2',
        Points: 250,
        Total: 500
    },
    {
        Id: 5,
        CriteriaName: 'First Criteria',
        CustomerName: 'Customer-3',
        Points:150,
        Total: 500
    },
    {
        Id: 5,
        CriteriaName: 'Second Criteria',
        CustomerName: 'Customer-1',
        Points:400,
        Total: 450
    },
    {
        Id: 5,
        CriteriaName: 'Second Criteria',
        CustomerName: 'Customer-2',
        Points: 300,
        Total: 450
    },
    {
        Id: 5,
        CriteriaName: 'Second Criteria',
        CustomerName: 'Customer-3',
        Points:200,
        Total: 450
    }
];

And desired output would be:

jsfiddle:

https://jsfiddle.net/7L79dryr/1/

so the header is static always 4 heards is it ? (total , cutomer-1 , cutomer-2 , cutomer-3 ) ? — Gayathri Mohan
– Gayathri Mohan, Commented Jun 30, 2016 at 2:00

charlietfl · Accepted Answer · 2016-06-30 03:09:38Z

2

Need to map this to a different data structure as well as an array of customers

 <table class='tbl'>
   <thead>
     <tr>
       <th></th>
       <th>total</th>
       <th ng-repeat="customer in customers">{{customer}}</th>          
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat='(name, data) in criteria'>
       <td>{{name}}</td>
       <td>{{data.Total}}</td>
       <td ng-repeat="customer in customers">
           {{data[customer] ? data[customer]  : 'N/A' }}
       </td>
     </tr>
     </tbody>
   </table>

JS

var customers = {},
    criteria = {};

data.forEach(function(item){
   customers[item.CustomerName]=true;
   if(!criteria[item.CriteriaName]){   
      criteria[item.CriteriaName]= {Total:item.Total}
   }
   criteria[item.CriteriaName][item.CustomerName]  = item.Points;
});

$scope.customers = Object.keys(customers).sort();
$scope.criteria = criteria;

Not sure how the Total should work , I just used the first available one

DEMO

edited Jun 30, 2016 at 3:09

answered Jun 30, 2016 at 3:02

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

MUHAMMAD MUBUSHER ASLAM Over a year ago

doesn't work for me, cause I also want to post data to the server

charlietfl Over a year ago

What difference does that make?

MUHAMMAD MUBUSHER ASLAM Over a year ago

object doest have TotalPoints column

charlietfl Over a year ago

I answered what was asked in question and also provided a demo that matched expected display results. if there is more then question needs to have more details added to it. Otherwise you should accept this and modify it to your needs

Collectives™ on Stack Overflow

How to display Object as complex html table in angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related