ng-repeat not working while traversing JavaScript array of objects

Question

This is my controller code

var myApp = angular.module('myApp',[]);
myApp.controller('restaurantController',['$scope','$http', function($scope, $http){
    $http.get($scope.something).success(function (data){
        $scope.items = data;
    });
    $scope.orders = [];
    $scope.process = function(item){
        var cart = '{"name":"'+item.name+'","price":"'+item.quantity*parseInt(item.price)+'","quantity":"'+item.quantity+'"}';
        $scope.orders.push(cart);
    }
}]);

Basically I have a PHP page where I am getting the user values and dynamically adding elements to the $scope.orders array.

And then to display the elements of array I am using this code

<div class="container" ng-repeat="order in orders">
    <h3>{{order.name}}</h3>
</div>

In my PHP page.But nothing being displayed.

Answer 1

Be careful you're not pushing object in your $scope.orders Array, you're pushing stringified version of your object.

Unlike PHP, JavaScript interpret and nows how to use and browse through JSON objects. Try this :

var myApp = angular.module('myApp',[]);

myApp.controller('restaurantController',['$scope','$http', function($scope, $http){
  $scope.orders = [];

  $http.get($scope.something)    // .success() is deprecated use .then() instead
    .then(function ( data ) {
      $scope.items = data;
    },
    function ( err ) {
      $scope.items = [];
    });

  $scope.process = function(item){
    var cart = { 
      name      : item.name,
      price     : item.quantity * parseFloat(item.price), 
      quantity  : item.quantity 
    };

    // Use .parseFLoat() because item price may not be an integer

    $scope.orders.push(cart);
  }
}]);

Then you'll be able to loop over $scope.orders Array.