Angular http json request issue

Question

Hello I have a simple question but I'm running into problems. I edited some code that I found on line. I'm trying to utilize an Angular http service to retrieve JSON data but it doesn't seem to be working

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

app.controller('MainCtrl', function($scope, $http) {

  $http.get('https://www.dropbox.com/s/325d678ksplb7qs/names.json')
    sucess(function(data, status, headers, config) {
      $scope.posts = data;
  }).
  error(function(data, status, headers, config) {
      // log error
  });

});

My code example is below

http://codepen.io/jimmyt1001/pen/dPVveN

Answer 1

tl;dr

It should be like this:

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

app.controller('MainCtrl', function($scope, $http)
{
    $http.get('https://www.dropbox.com/s/325d678ksplb7qs/names.json')
        .success(function(data, status, headers, config)
        {
            $scope.posts = data;
        })
        .error(function(data, status, headers, config)
        {
            // log error
        });
});

Ie you're missing a dot ( . ) before success and your success is incorrectly typed (you type sucess ).

Original

Your code should be structured like this:

// Simple GET request example :
$http.get('/someUrl').
    success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
}).
error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

As explained in the docs .

Yours is like this:

$http.get('https://www.dropbox.com/s/325d678ksplb7qs/names.json')
   sucess(function(data, status, headers, config) {

Wherea you're missing a dot (.) before the success, and your success is spelled wrong (yours is sucess).

It's decent practice to copy existing demos until you're certain on how they're really setup. Also, use your developer tools to catch easy bugs like this.

It's also possible that your dropbox call is simply invalid, but if you fix your code accordingly then the error method should be able to catch it and you should be able to see the error.

Answer 2

You spelled wrong sucess should be success

CODE

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

app.controller('MainCtrl', function($scope, $http) {

  $http.get('https://www.dropbox.com/s/325d678ksplb7qs/names.json')
    .success(function(data, status, headers, config) {
      $scope.posts = data;
  }).
  error(function(data, status, headers, config) {
      // log error
  });

});

Answer 3

you should use a service for this:

json.service('getJson', ['$http', function ($http) {
        var promise = null;
        //return service
        return function () {
            if (promise) {
                return promise;
            } else {
                promise = $http.get('url');
                return promise;
            }
        };

    }]);

    function MainCtrl($scope, getJson) {

        getJson().success(function (data) {
            $scope.json = data;

        });

    };

Remember to inject the service name in your controller.