How to create table structure (tr elements) dynamically (from JSON) in AngularJS

Question

How can I fill in the following table html structure with json data in a dynamic way? (with AngularJS).

Here is the basic HTML structure:

<table class="some styling">
                    <tbody>
  <tr>
    <td><a title="test" href="#"><span>Just some tests</span></a></td>
    <td><a title="test" href="#"><span>Just some tests</span></a></td>
    <td><a title="test" href="#"><span>Just some tests</span></a></td>
  </tr>
  <tr>
  <td><a title="test" href="#"><span>Just some tests</span></a></td>
  <td><a title="test" href="#"><span>Just some tests</span></a></td>
  <td><a title="test" href="#"><span>Just some tests</span></a></td>
  </tr>
 </tbody>
</table>

The difficult part is how to determine the "tr" elements. There are always 3 td elements in 1 tr element. Only the amount of TD elements may vary.

Thanks in advance

Are you looking for ng-repeat? It very much depends how your JSON / Array looks like. — C14L
– C14L, Commented Jul 6, 2016 at 7:35
And yes I know I should use "ng-repeat" but I don't know how I can provide dynamic rows — hazhaz
– hazhaz, Commented Jul 6, 2016 at 7:55
dynamic rows will be craeated based on json data. you can use ng-repeat i will post the example for this — naresh vadlakonda
– naresh vadlakonda, Commented Jul 6, 2016 at 8:30

naresh vadlakonda · Accepted Answer · 2016-07-06 08:50:35Z

1

Html:
<table border="1" style="border-collapse: collapse">
      <tr>
        <th>id</th>
         <th>firstname</th>
          <th>lastname</th>
      </tr>
      <tr ng-repeat="user in users">
        <td>{{user.id}}</td>
        <td>{{user.firstname}}</td>
        <td>{{user.lastname}}</td>
        </tr>
    </table>

Json:

$scope.users=[
    {id:1,firstname:"naresh",lastname:"kumar"},
    {id:2,firstname:"suresh",lastname:"kumar"},
    {id:3,firstname:"harish",lastname:"kumar"},
    ]

this is the example am posting you can manipulate it. you can a have look here https://plnkr.co/edit/umC2hwECePaAqZ0huYoK?p=preview

edited Jul 6, 2016 at 8:50

answered Jul 6, 2016 at 8:44

naresh vadlakonda

4071 gold badge4 silver badges13 bronze badges

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

2 Comments

hazhaz Over a year ago

Thanks for your answer. I understand your example but in my case it's different. I don't need different values likes id,firstname,lastname. I have to show only the site's name. I thought something like this: <tr ng-repeat="item in navigationData"> <td>{{navigationData[$index].name}}</td> <td>{{navigationData[$index+1].name}}</td> <td>{{navigationData[$index+2].name}}</td> </tr> But it still does not work..

hazhaz Over a year ago

So I need something like this: (example) '[SiteA][SiteB][SiteC] [SiteAA][SiteBB][SiteCC] [SiteAAA][SiteBBB][SiteCCC]' ... Always 3 columns but different rows

Collectives™ on Stack Overflow

How to create table structure (tr elements) dynamically (from JSON) in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related