Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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.

share|improve this question
up vote 1 down vote accepted

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>   -->

share|improve this answer
    
ok,But where is sub header for order. – satya Feb 6 '16 at 8:55
    
So you need headers for id and order_status? – pritesh Feb 6 '16 at 9:00
    
yes i need sub header for order_status and order_id. – satya Feb 6 '16 at 9:02
    
Do you want it inside the column or in the place of order? Both can be dont. Your choice. Which one? – pritesh Feb 6 '16 at 9:04
    
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. – satya Feb 6 '16 at 9:07
up vote 1 down vote

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>
share|improve this answer
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

This will help you,

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.