show data in angularjs in html page

Question

I am creating project using angularjs. I have problem while showing data:

I have JSON like:

$scope.customerContracts =     [{
      "description": null,
      "latency": "1",
      "linkid": "26149e91-f6c8-47fb-a10d-691e76486871",
      "contracts": [{
        "contractid": "26149e91-f6c8-47fb-a10d-691e76486871.2",
        "duration": 7200,
        "bandwidth": 300000,
        "price": 0,
        "contractStatus": 8,
        "version": 1560,
        "deletedtimestamp": 0,
        "currencyID": "1",
        "renewal-option": 1,
        "contract-start-time": 1461918999000,
        "contract-end-time": 1461926198000
      }],

      "tag": null,
      "connections": ["49b33cd1-5722-4e8e-b40c-03c3407c5efe", "cd354769-d52a-414e-bb7c-f0e0690ddf3b"],
      "type": "0",
      "linkStatus": 6,
      "billing-id": "5f1dd7c5-c48b-44ed-be14-cf2a8730fe27"
    }]

Here is my code which is using in html.I dont know where I am going wrong:

<tr ng-repeat="contract in customerContracts.contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
                </tr>

Are you getting some error?

Abbasi
– Abbasi

2016-04-29 09:46:48 +00:00
Commented Apr 29, 2016 at 9:46 — Abbasi
– Abbasi, Commented Apr 29, 2016 at 9:46

Michael Laffargue · Accepted Answer · 2016-04-29 09:48:00Z

3

customerContracts being an array you'll have to ng-repeat there first and then loop over contracts.

Something like :

<div ng-repeat="contracts in customerContracts">
<...>
<tr ng-repeat="contract in contracts.contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
                </tr>
<...>
</div>

answered Apr 29, 2016 at 9:48

Michael Laffargue

10.3k6 gold badges46 silver badges76 bronze badges

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

4 Comments

Michael Laffargue Over a year ago

And the problem being ? What is your problem ? No data? Error ?

thepio Over a year ago

Might be a stupid question but does OP have a table <table> surrounding the table-row <tr>? Otherwise this code should work.

Michael Laffargue Over a year ago

@thepio, well we can't think that far given the question. As he/she a webserver running ? Is he/she using a browser ? :)

thepio Over a year ago

@MichaelLaffargue I'm sorry I don't quite understand, but my original comment was pointed towards the original question asker. And your answer should work which ever way since it was stated that the array is created in the controller etc. So given the circumstances your answer is correct.

tamil · Accepted Answer · 2016-04-29 09:52:12Z

1

Get the value in separate $scope like this,

$scope.getValue=$scope.customerContracts.contracts;

answered Apr 29, 2016 at 9:52

tamil

1181 gold badge1 silver badge7 bronze badges

Comments

Anshu Kumar · Accepted Answer · 2016-04-29 10:08:26Z

1

You are going wrong in the way you are accessing your data. $scope.customerContracts doesn't have contracts. Each object inside it has. And then again contracts is again an array of objects. So you would need to do a repeat over it again. You should have something like

<elem ng-repeat="customerContract in customerContracts">
    <tr ng-repeat="contract in customerContract.contracts">
        <! -- Your code -- >
    </tr>
</elem>

Note you would need to choose elem based upon your requirement.

Find the plunk omitting the elem.

edited Apr 29, 2016 at 10:08

answered Apr 29, 2016 at 9:50

Anshu Kumar

6467 silver badges18 bronze badges

1 Comment

Anshu Kumar Over a year ago

Do you have a JSfiddle or something?

Mohsin Muzawar · Accepted Answer · 2016-04-29 10:22:37Z

angular.module('app',[]).controller('ctrl',function($scope,$http){

$scope.customerContracts =     [{
      "description": null,
      "latency": "1",
      "linkid": "26149e91-f6c8-47fb-a10d-691e76486871",
      "contracts": [{
        "contractid": "26149e91-f6c8-47fb-a10d-691e76486871.2",
        "duration": 7200,
        "bandwidth": 300000,
        "price": 0,
        "contractStatus": 8,
        "version": 1560,
        "deletedtimestamp": 0,
        "currencyID": "1",
        "renewal-option": 1,
        "contract-start-time": 1461918999000,
        "contract-end-time": 1461926198000
      }],

      "tag": null,
      "connections": ["49b33cd1-5722-4e8e-b40c-03c3407c5efe", "cd354769-d52a-414e-bb7c-f0e0690ddf3b"],
      "type": "0",
      "linkStatus": 6,
      "billing-id": "5f1dd7c5-c48b-44ed-be14-cf2a8730fe27"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table style="width:100%;text-align:center;">
  <tr>
    <th>contractid</th>
    <th>contractStatus</th> 
    <th>bandwidth</td>
    <th>contract-start-tim</th>
    <th>contract-end-time</th> 
    <th>renewal-option</th>
    <th>price</th> 
    <th></th>
  </tr>
  <tr ng-repeat="contract in customerContracts[0].contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
  </tr>
</table>
  
</div>

thepio · Accepted Answer · 2016-04-29 11:19:49Z

Your JSON is not proper for the ng-repeat because it's an arrat. If you can change the JSON (if it's not coming from a system you are not able to edit) make it like this and your existing html will work. If you know for sure it will not be an array.

$scope.customerContracts =    {
  "description": null,
  "latency": "1",
  "linkid": "26149e91-f6c8-47fb-a10d-691e76486871",
  "contracts": [{
    "contractid": "26149e91-f6c8-47fb-a10d-691e76486871.2",
    "duration": 7200,
    "bandwidth": 300000,
    "price": 0,
    "contractStatus": 8,
    "version": 1560,
    "deletedtimestamp": 0,
    "currencyID": "1",
    "renewal-option": 1,
    "contract-start-time": 1461918999000,
    "contract-end-time": 1461926198000
  }],

  "tag": null,
  "connections": ["49b33cd1-5722-4e8e-b40c-03c3407c5efe", "cd354769-d52a-414e-bb7c-f0e0690ddf3b"],
  "type": "0",
  "linkStatus": 6,
  "billing-id": "5f1dd7c5-c48b-44ed-be14-cf2a8730fe27"
};

If you can not change the JSON format you can do this in your html and it will work:

<div ng-repeat="contracts in customerContracts">
  <table>
    <tr ng-repeat="contract in contracts.contracts">
      <td>{{contract.contractid}}</td>
      <td>{{contract.contractStatus}}</td>
      <td>{{contract.bandwidth}}</td>
      <td>{{contract["contract-start-time"]}}</td>
      <td>{{contract["contract-end-time"]}}</td>
      <td>{{contract["renewal-option"]}}</td>
      <td>{{contract.price}}</td>
      <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
    </tr>
  </table>
</div>

Rahul K P · Accepted Answer · 2016-05-03 07:07:58Z

If you want to use existing json then this will work

<tr ng-repeat="contract in customerContracts[0].contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
                </tr>

Because customerContracts is an array and you are accessing element from its first value that is a dictionary. So you have to take 0'th element of big array customerContracts[0] now this value customerContracts[0] is a dictionary so you can access from dictionary by simple dot customerContracts[0].contracts

Collectives™ on Stack Overflow

show data in angularjs in html page

6 Answers 6

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related