AngularJS error while uploading the json file

Question

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>

errors breaks your stack so angular not track that smth changed — Drag13
– Drag13, Commented Oct 21, 2016 at 15:52
@JaqenH'ghar Thank you so much my friend! Make an answer I will accept it as best answer. — Patrickkx
– Patrickkx, Commented Oct 21, 2016 at 15:52

Jaqen H'ghar · Accepted Answer · 2016-10-21 16:02:48Z

1

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

answered Oct 21, 2016 at 16:02

Jaqen H'ghar

17k8 gold badges52 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrickkx Over a year ago

Thanks bro. Once again.

Collectives™ on Stack Overflow

AngularJS error while uploading the json file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related