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

I'm using a REST architecture on the backend using CakePHP 3 that returns a JSON Array with this format according to firebug, it's a 200 OK, with this response:

    {
    "recipes": [
        {
            "id": 0,
            "name": "modificadodsadasdas"
        },
        {
            "id": 1,
            "name": "dasdasdasdasdas"
        }
    ]
}

My index.html file:

<html>
<head>

</head>
<body ng-app="AppRecetas">
  <div ng-controller="RecetasCtrl">
    <ul ng-repeat="recipe in recipes">
      <li>{{recipe.name}}</li>
    </ul>
</div>
<script src="js/angular.min.js"></script>
<script src="js/consumidor_rest.js"></script>
</body>
</html>

And my consumidor_rest.js that brings the data from the REST webservice(which is on the same server):

var app = angular.module("AppRecetas", []);

app.controller("RecetasCtrl", function($scope, $http) {
  $http.get('http://localhost/services/recipes/index.json').
    success(function(data, status, headers, config) {
      $scope.recipes = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

The console of firebug doesn't show any errors and the ajax call is correct with the correct response. But the ng-repeat is just showing one single dot of the ul with no value. If I use inside the ng-repeat:

 <li>{{recipe[0].name}}</li>

I can see the first element displayed correctly. What's going wrong?. I guess it's a problem with how the array is being delivered by cakePHP, but I'm not sure......

share|improve this question
1  
Try setting $scope.recipes to data.recipes. – Kyle Apr 21 '16 at 13:33
    
need to see wat u get in response .. – Mohsin Muzawar Apr 21 '16 at 13:40
up vote 2 down vote accepted

Check the data object that your are getting from the http call. I think your data object is the JSON object and the "recipes" property inside the object is your array. So consider changing your $scope.recipes = data to $scope.recipes = data.recipes.

For verifying the data object in your UI print something like this: 

{{ $scope.recipes | json }}
share|improve this answer
    
Thanks, that line solved it......Now the results are displaying correctly – Juan Apr 21 '16 at 13:46
up vote 2 down vote

The problem might be that the object aren't turned into propper objects. You might wanna try to turn them into JSON objects, like so:

for(var i = 0; i < recipes.length; i++){
   recipesArray.push(JSON.parse(recipes[i]));
}
$scope.recipes = recipesArray;

And then in the view

<ul ng-repeat="recipe in recipes">
  <li>{{recipe.name}}</li>
</ul>
share|improve this answer
up vote 0 down vote

I think your http call returns the data in another object (I suspect response.data, in your case: $scope.recipes = data.data;

Edit: just console.log your return data from the http call.

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.