0

I have an angularjs application that basically takes JSON and creates a HTML table, with the keys in the <thead> and the values as table rows.

I have a JSFiddle here where I take the JSON and create table rows based on the values. But I can't figure out how to take the keys and align them with the values as table headers.

My angular code:

<tr ng-repeat='row in rows'>
    <td ng-repeat="data in row.data">
       {{data}}
    </td>
</tr>

and:

function TableController($scope){

    $scope.rows = data;

}
infinity
  • 719
  • 2
  • 11
  • 23

1 Answers1

1

Take a look here: How can I iterate over the keys, value in ng-repeat in angular

<tr ng-repeat="(key, value) in data">
    <td> {{key}} </td> <td> {{ value }} </td>
</tr>

====EDIT==== Since you're doing it all in the same table, you'll need to do it a different way. You need to separate the header values while you're still in the controller so that you have a clean way to iterate over your list. Here the fiddle: http://jsfiddle.net/L93v5/1/

Your revised way looks bad because there are two different tables and the cell sizes are different. This will keep it all in the same table and make things a bit cleaner.

Community
  • 1
  • 1
Mike DeMille
  • 342
  • 1
  • 5
  • 17
  • Thanks for the answer, but how would I use this in the context of my application? Here's my attempt (http://jsfiddle.net/Lesbz/), but it doesn't seem to work. – infinity Dec 03 '13 at 04:52
  • You're right... I didn't quite think it through all the way before I posted. Is this fiddle more like what you're thinking of? http://jsfiddle.net/Lesbz/1... Is the format of the JSON always going to be the same? Or rather, is it going to be one table or several? If it's only going to be one, then in the controller you would need to pull out the table header values, put them into the scope, and `ng-repeat` over those before you `ng-repeat` over your data. If it's multiple tables, then that fiddle should work (although I couldn't figure out how to get rid of that redundant loop. It's late :) ) – Mike DeMille Dec 03 '13 at 09:17
  • I figured it out (http://jsfiddle.net/L93v5/), but thanks for all your help. I'll accept yours. – infinity Dec 03 '13 at 21:18
  • 1
    Take a look at my edited answer. It's better now that I know you wanted to keep it in the same table. – Mike DeMille Dec 03 '13 at 21:41