CODEWITHSUNDEEP
javascriptangularjsarraysangular-directive
Vinit Raj
Vinit Raj

Reputation: 1910

How do i iterate this object of array using ng-repeat

I have this following object of array returned in my console now what i want to do is to iterate it over using ng-repeat in my index.html file so how will i do it here is the returned json:-

{body: ["xx", "x", "x", "vinit↵", "gyghg", "hjhghg", "j", "jj", "bn", "ss"]}

My app.js:-

var app = angular.module('myApp',[]);
app.controller('movie',['$http','$scope',function($http,$scope) {
    $scope.products = [];
    $http.get('blog/').then(successCallback, errorCallback);
    function successCallback(response){
        products=response.data;
        console.log(products);
    }
    function errorCallback(error){
        console.log(error);
    }

    // body...
}]);

And here what i am doing to iterate those objects in my index.html:-

<div ng-repeat="item in products">
    <ul>
        <li>{{item.body}}</li>
    </ul>
</div>

But Its not printing anything on the screen what i want is to print those array element in that li tag.

Upvotes: 1

Views: 1303

Answers (6)

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

Try this

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
  <script type="text/javascript">
    angular.module("app", []).controller('Controller', Controller);

    function Controller($scope, $http) {
      var res =  {body: ["xx", "x", "x", "vinit↵", "gyghg", "hjhghg", "j", "jj", "bn", "ss"]};
      $scope.products = res.body;
    }

  </script>
</head>
<body>

  <div ng-app="app" ng-controller="Controller" class="container">
    <div ng-repeat="item in products track by $index">
      <ul>
        <li>{{item}}</li>
      </ul>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Rober
Rober

Reputation: 61

As everybody tells you, you need to replace 

products=response.data;

to

 $scope.products=response.data;

After that, in the view, you want to iterate the body elements, so:

<div ng-repeat="item in products.body">
<ul>
    <li>{{item}}</li>
</ul>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222522

You should have a $scope variable products,

change

From

 products=response.data;

To

 $scope.products=response.data;

and you should be able to access in ,

<div ng-repeat="item in products">
    <ul>
        <li>{{item}}</li>
    </ul>
</div>

Upvotes: 1

Jay Pastagia
Jay Pastagia

Reputation: 39

Required to Change products=response.data; to $scope.products=response.data;

Assign response value to angular scope variable to access that value in html page.

And change {{item.body}} to {{item}}

    <li>{{item}}</li>

Upvotes: 2

Saurabh Mehta
Saurabh Mehta

Reputation: 228

Change products=response.data; To $scope.products=response.data;

And change {{item.body}} to {{item}}

<div ng-repeat="item in products">
    <ul>
        <li>{{item}}</li>
    </ul>
</div>

Upvotes: 1

Ravi Ubana
Ravi Ubana

Reputation: 395

try this

var app = angular.module('myApp',[]);
app.controller('movie',['$http','$scope',function($http,$scope) {
$scope.products = [];
$http.get('blog/').then(successCallback, errorCallback);
function successCallback(response){
    $scope.products=response.data;
    console.log($scope.products);
}
function errorCallback(error){
    console.log(error);
}

// body...
}]);

Upvotes: 0

Related Questions