Patrickkx Patrickkx - 1 month ago 20
JSON Question

AngularJS error while uploading the json file

There's something wrong when I'm trying to get json file with data into my ng-repeat.

Somehow, in the console appears

'All drinks loaded!'
which is success information, but it doesn't show in the DOM.

Also I'm receiving an error:
angular.min.js:118 TypeError: $http.get(...).success(...).errors is not a function


If anybody knows what may causing that error, please tell me.
Thanks for help.



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

app.controller('MainController', ['$scope', '$http', '$log',
function($scope, $http, $log) {

$scope.drinks = [];

$http.get('drinks.json')
.success(function(data, status, headers, config) {

$scope.drinks = data;
$log.info('All drinks loaded!');

}).errors(function(data, status, headers, config) {

$log.error('Error' + status + 'unable to download drinks list.');

});
}
]);

//drinks.json
//[
//{
//"name": "Pepsi 1l",
//"price": 2.99
//},
//{
//"name": "Orange juice 0.5l",
//"price": 1.40
//},
//{
//"name": "Lemon tea 2l",
//"price": 3.20
//},
//{
//"name": "Cola-Cola 0.33l",
//"price": 0.89
//}
//]

<div class="container">

<div class="content" ng-controller="MainController">

<div class="col-md-6">

</div>



<div class="col-md-6">
<ul class="list-group">
<li class="list-group-item" ng-repeat="(id, product) in drinks">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
<button ng-click="removeFromCart(id)" class="btn btn-xs btn-danger pull-right">X</button>
</li>
</ul>
</div>


</div>

</div>




Answer

Its .error() not .errors()

$http.get('url')
    .success(function(data, status, headers, config) {
         // do something
    }).error(function(data, status, headers, config) {
         // do something 
    });

Change it to fix the js error and your page will work fine