CODEWITHSUNDEEP
htmlangularjs
Vipul sharma
Vipul sharma

Reputation: 1255

how to make html table from an array with angular js

I have an array like-: 

aw_score_list = {
    '6':99,'5.5':98,'5':93,'4.5':80,'4':56,'3.5':38,'3':15,'2.5':7,'2':2,'1.5':1,'1':1,
};

I want to convert this to html table so it will become like 

keys     Values
   6         99
 5.5         98

... and so on

please advise me how to set a for loop for it

Upvotes: 4

Views: 2499

Answers (2)

rabbit.aaron
rabbit.aaron

Reputation: 2579

That is possible, but the order will be messed up, if you want to preserve order, you need something like this:

aw_score_list_preserve_order = [    
    {key:'6'   , value:99},
    {key:'5.5' , value:98},
    {key:'5'   , value:93},
    {key:'4.5' , value:80},
    {key:'4'   , value:56},
    {key:'3.5' , value:38},
    {key:'3'   , value:15},
    {key:'2.5' , value:7},
    {key:'2'   , value:2},
    {key:'1.5' , value:1},
    {key:'1'   , value:1},
  ]

this is pretty basic ng-repeat iteration, you should probably check out the angular documentation.

Plunker

Upvotes: 1

Phil
Phil

Reputation: 164733

See ngRepeat - Iterating over object properties.

Assuming your array is in scope for the template...

<table>
<thead>
<tr>
    <th>keys</th>
    <th>Values</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, val) in aw_score_list">
    <td>{{key}}</td>
    <td>{{val}}</td>
</tr>
</tbody>
</table>

Upvotes: 4

Related Questions