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

"sucess", should be "success" also you need another dot before success — Ronnie
– Ronnie, Commented Feb 2, 2015 at 19:37
I'm pretty sure it is because you are using Dropbox as the data source. Even though it looks like it should return a json file, the URL you used actually return a dropbox web page with the json file rendered. — Vinh Tran
– Vinh Tran, Commented Feb 2, 2015 at 19:38

Pankaj Parkar · Accepted Answer · 2015-02-02 19:41:19Z

1

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
  });

});

answered Feb 2, 2015 at 19:41

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

user3155561 · Accepted Answer · 2015-02-02 19:46:36Z

1

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.

answered Feb 2, 2015 at 19:46

user3155561

3 Comments

Spanky Over a year ago

Thanks Knostradamus, silly question by how do I inject the service name in my controller? My html code is currently <section ng-app="app" ng-controller="MainCtrl">

user3155561 Over a year ago

a few different ways: easiest is to do it directly .controller(controllerName, ['$scope', 'serviceName', function($scope, serviceName) {}]); notice the second part does not have '' around the names

Spanky Over a year ago

Thanks, I think I follow you. Do you happened to have a code example of this?

Jonast92 · Accepted Answer · 2015-02-02 19:47:10Z

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
        });
});

I.e. 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.

edited Feb 2, 2015 at 19:47

answered Feb 2, 2015 at 19:39

Jonast92

4,9671 gold badge20 silver badges33 bronze badges

1 Comment

Spanky Over a year ago

Great answers! Thank you all! That fixed the problem but I still can't see data believe Vinh Tran was right on this one. My data not displaying may also have something to do with me using placing my JSON file in dropbox

Collectives™ on Stack Overflow

Angular http json request issue

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related