CODEWITHSUNDEEP
htmlangularjsjsonnode.js
Amit Shirke
Amit Shirke

Reputation: 81

How to print data in html using ng-repeat angularjs

I have json data in controller as response. I have to print that data in html.

for that I have done as below:

In my controller

.controller('DataImportControl', ['$scope','$http', '$location', '$rootScope' , function($scope, $http, $location, $rootScope) {

    console.log(" In dataimportCtrl");

        $scope.readCustomer = function(){

            console.log("in read customer");

            $http.post('/custimport').success(function(response) {


                console.log("in controller");
                console.log("controller:"+response);

                $scope.data=response; 

            }).error(function(response) {

             console.error("error in posting");

            });
        };
}])

My html code:

<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="DataImportControl">
<form ng-submit="readCustomer()">

    <button type="submit" >Submit</button>
    </form>
<table class="table">
    <thead>
  <tr>
<th>Code exists in customer master</th>
  </tr>
    </thead>
<tbody>
<tr ng-repeat="cust in data ">
    <td>{{cust.customer_code}}</td>

</tr>
</tbody>
</table>

</div>
<div >
</div>

</body>

</html>

My json data as response in controller :

{"jarray":[{"customer_name":["Ankita"],"customer_code":["c501"]}]}

My question is how to print json data in html using ng-repeat in my case?

Thanks in advance...

Upvotes: 0

Views: 4242

Answers (2)

Claies
Claies

Reputation: 22323

The data being returned from your service is strangely formatted. I would assume you have multiple records being returned, but you are only showing one in this example.

The record you are showing here is an object, with an array as one of the properties. It is not clear if your object has multiple arrays, or if this array has multiple customer objects embedded in it. However, I worked up a quick plunker showing how to iterate through in both situations.

first, if you intend to iterate through data directly, and data will hold multiple arrays, you would use the (key, value) syntax, since data itself is an object and not an array.

<div ng-repeat="(key, value) in data">
  key: {{key}}
  <br/>value: {{value}}
  <div ng-repeat="customer in value">
    Customer name: {{customer.customer_name}}
    <br/>Customer code: {{customer.customer_code}}
  </div>
</div>

However, if your data is only returning a single object property, jarray, and you will always be iterating through this same property, the outer ng-repeat is unnecessary:

<div ng-repeat="customer in data.jarray">
  Customer name: {{customer.customer_name}}
  <br/>Customer code: {{customer.customer_code}}
</div>

you may want to clean up your service, either in angular or on your server, and remove jarray all together, if it doesn't hold a specific significance to the data.

http://plnkr.co/edit/Nq5Bo18Pdj4yLQ13hnrJ?p=preview

Upvotes: 2

yusijs
yusijs

Reputation: 867

I'm assuming you want to print out the actual object, in that case just do

{{cust | json}}

Wrap it in pre tags to have it prettified.

Upvotes: 2

Related Questions