How to display the array of data inside table Using Angular.js ng-repeat

Question

I am facing one issue.I need to display some array of data inside table using Angular.js.I am explaining my code below.

Table:

<table class="table table-bordered table-striped table-hover" id="dataTable" >
        <tbody>
            <tr>
                <td rowspan="2">Date</td>
                <td rowspan="2">id</td>
                <td rowspan="2">email</td>
                <td colspan="7">Order</td>
            </tr>
            <tr>
              <td>Order Id</td>
              <td>Status</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
        </tbody>
   </table>

I am explaining my array of data below.

$scope.listOfData=
[
    {
        "date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
        "id": "36",
        "email": "[email protected]",
        "order": [
            {
                "order_status": 1,
                "order_id": 1111
            },
            {
                "order_status": 0,
                "order_id": 2222
            },
            {
                "order_status": 1,
                "order_id": 5555
            }
        ]
    },
    {
        "date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
        "id": "37",
        "email": "[email protected]",
        "order": [
            {
                "order_status": 1,
                "order_id": 3333
            },
            {
                "order_status": 0,
                "order_id": 4444
            }
        ]
    }
]

I need to display above data into the table using Angular.js.please help me.

pritesh · Accepted Answer · 2016-02-06 09:14:15Z

1

Run this code and check out the output. Let me know if you need different format.. cheers!!!

var app = angular.module("myApp",[]);
app.controller("AppController",['$scope',AppController]);

function AppController($scope) {
  
  
    $scope.listOfData=[
          {
              "date": "2016-01-25 18:14:00 to 2016-02-05 11:26:05",
              "id": "36",
              "email": "[email protected]",
              "order": [
                  {
                      "order_status": 1,
                      "order_id": 1111
                  },
                  {
                      "order_status": 0,
                      "order_id": 2222
                  },
                  {
                      "order_status": 1,
                      "order_id": 5555
                  }
              ]
          },
          {
              "date": "2016-01-23 13:15:59 to 2016-01-25 18:14:00",
              "id": "37",
              "email": "[email protected]",
              "order": [
                  {
                      "order_status": 1,
                      "order_id": 3333
                  },
                  {
                      "order_status": 0,
                      "order_id": 4444
                  }
              ]
          }
      ];
      
      
    
  }

<!DOCTYPE html>

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script src="app.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="AppController">

  
  <table cellspacing="5px" style="border:1px solid black;">
  <tr >
        <th>Date</th>
        <th>id</th>
        <th>email</th>
        <th>Order</th>
    </tr>
    <tr ng-repeat="orderInfo in listOfData">
        <td>{{orderInfo.date}}</td>
        <td>{{orderInfo.id}}</td>
        <td>{{orderInfo.email}}</td>
        <td>
          <table>
            <tr>
              <th>Order stat</th>
              <th>Id<th>
            </tr>
            <tr ng-repeat="orderStat in orderInfo.order">
              <td>{{orderStat.order_status}}</td>
              <td>{{orderStat.order_id}}</td>
            </tr>
          </table>
        </td>
    </tr>   
    
  </table>
</div>

</body>
</html>
<!--
This is for table inside row.
<tr ng-repeat="orderInfo in listOfData">
        <td>{{orderInfo.date}}</td>
        <td>{{orderInfo.id}}</td>
        <td>{{orderInfo.email}}</td>
        <td>
          <table>
            <tr ng-repeat="orderStat in orderInfo.order">
              <td>{{orderStat.order_status}}</td>
              <td>{{orderStat.order_id}}</td>
            </tr>
          </table>
        </td>
        
    </tr>   -->

edited Feb 6, 2016 at 9:14

answered Feb 6, 2016 at 8:44

pritesh

5434 silver badges16 bronze badges

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

6 Comments

pritesh Over a year ago

So you need headers for id and order_status?

satya Over a year ago

yes i need sub header for order_status and order_id.

pritesh Over a year ago

Do you want it inside the column or in the place of order? Both can be dont. Your choice. Which one?

satya Over a year ago

under order cilumn there should be two sub column like orer id and order status and these should keep multiple value as you have done.

pritesh Over a year ago

Check it out now. Is that good enough or no repeating of order stat and id header in each column?

|

Mahantesh Kumbar · Accepted Answer · 2016-02-06 07:47:30Z

1

Try this

        <tr ng-repeat="(key,list) in listOfData">
          <td ng-repeat="(key, lists) in list.order "> {{lists.order_status}}</td>
          <td ng-repeat="(key, lists) in list.order "> {{lists.order_id}}</td>
        </tr>

edited Feb 6, 2016 at 7:47

answered Feb 6, 2016 at 7:25

Mahantesh Kumbar

2551 silver badge10 bronze badges

Comments

Ritt · Accepted Answer · 2016-02-06 07:38:22Z

Make you header fixed of the table, put it outside of your loop.

Put this outside of the loop i.e ng-repeat

           <tr>
                <td rowspan="2">Date</td>
                <td rowspan="2">id</td>
                <td rowspan="2">email</td>
                <td colspan="7">Order</td>
            </tr>

You don't want to create it for every item, as it's going to be fixed.

Now, iterate through your list of json objects, using ng-repeat, as explained above.

Something like this..

<table class="table table-bordered table-striped table-hover" id="dataTable" >
   <div ng-repeat="list in listOfData">
    {{list.id}}
     <div ng-repeat="oderlist in list.order">
          {{orderlist.order_id}}
     </div>
</div>
</table>

You can modify it accordingly.

ojus kulkarni · Accepted Answer · 2016-02-06 08:02:09Z

0

This will help you,

<tr ng-repeat="item in listOfData">
<td> 
   <ul>
      <li>
         {{item.order}} // or print your array element there
      </li>
   </ul>
</td>

answered Feb 6, 2016 at 8:02

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to display the array of data inside table Using Angular.js ng-repeat

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related