Geek Answers Handbook

How to make html table from array using 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 an html table so that it looks like

keys     Values
   6         99
 5.5         98

... etc.

please tell me how to set the for loop for it

+4
source share
2 answers

See ngRepeat - Iterating Object Properties .

Assuming your array is in the template area ...

<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>
+4
source

It is possible, but the order will be ruined, if you want to keep the 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 a fairly simple ng-repeat iteration, probably you should check the angular documentation.

Plunker

+1
source

More articles:


All Articles