current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I just prepared a data and want to display in html table but the problem is that every time I call the $http service it returns n number of columns. So basically what I want to display is that first row of the data should be used for column names and rest are rows. Sure the column names are not fixed there could be n number of columns. Below is the sample data:

[["Product",2016,2017],["A",50.92,550],["B",10,0],["C",20,0]]

or 

[["Product",2015, 2016,2017],["A",80, 50.92,550],["B",20, 10,0],["C",75,20,0]]

I tried this but not getting how to print the first row as column and display remaining rows beneath.

<table style="width:100%; font-size:11px; " ng-repeat="(key, value) in NewTable">

  <thead>
    <tr style="background-color:#00372B; height: 50px; ">
      <th style="padding:1%; color:white;" colspan="3">{{ key }}:{{value}}</th>
    </tr>

  </thead>
</table>

Request someone to provide the solution with angular-filter as well so I can add some calculated columns on the table as well. Thanks.

share|improve this question
    
What have you tried and what doesn't work? – Mathias W yesterday
    
Mathias W, see my updated question. – Saleem yesterday
    
Also post your angular code where you are constructing the data. – Ali Baig yesterday
    
Ali Baig, actually my angular code is very complex that's why I planned not to post all the stuff which can simply confuse others to understand or possible will take bit longer to resolve the issue. – Saleem yesterday
    
OK I have added my answer below on my understanding based on the given data. Please post you feedback – Ali Baig yesterday
up vote 0 down vote accepted

OK based on the data provided, give it a try

<table>
  <thead ng-repeat="columns in NewTable | limitTo:1">
    <tr ng-repeat="column in columns">
      <th>{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="rows in NewTable.slice(1,NewTable.length)">
      <td ng-repeat="row in rows">{{ row }}</td>
    </tr>
  </tbody>
</table>

Where NewTable is the array of data in your angular controller/component.

share|improve this answer
    
It does make the first row separate from other rows, but how I can fetch the values of each object. I mean it displays data in this form: ["Product",2016,2017] ["A",50.92,550] ["B",10,0] ["C",20,0] and moreover after this I want to use some of the angular-filter for the calculated fields like sum, avg ...etc. – Saleem yesterday
    
Yes I did something : <tr ng-repeat="entry in NewTable.slice(1,NewTable.length)"> <td ng-repeat="ent in entry">{{ ent }}</td> </tr> and it works like a charm, but again can I use the angular-filter with these. – Saleem yesterday
    
@Saleem I have updated my answer based on your first comment, try to see if it works now. – Ali Baig yesterday
    
Yes you can create a custom filter for that and use it after the ng-repeat block ends. It will be a piece of cake ;) – Ali Baig yesterday
    
Ali Baig, Can I append a calculated column at the end of each row using angular-fitler? – Saleem yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.