Angular http get not working

Question

I'm doing some testing with an API in apiary.io and I wanted to call some data from it with Angular, but it doesn't seem to call correctly. It should be pretty simple, so I'm not sure whats wrong:

HTML:

<span><a href="network-updates.html">{{user.text}}</a></span>

JS:

 var MainController = function($scope, $http){

 var usercomplete = function(response){
  $scope.user = response.data;
  };

  $http.get("http://private-abc123-.apiary-mock.com/bus")
.then(usercomplete);

  };

JSON:

{   
"Header" : "heading",
"text" : "hello"
}

Try parsing your json responce: angular.fromJson(response) — Ajay Narain Mathur
– Ajay Narain Mathur, Commented Jul 8, 2015 at 5:03

Spade · Accepted Answer · 2016-12-01 20:11:04Z

1

This works for me out of the box try: (This solution is no longer correct, see update below)

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

a.controller('dbCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.loadData = function () {
    $http.get("url")
        .success(function(data){
            $scope.data = data; //return if success on fetch
        })
        .error(function() {
            $scope.data = "error in fetching data"; //return if error on fetch
        });
    };

    $scope.loadData(); //return loadData function

}]);

Update:

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

a.controller('dbCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.loadData = function () {
    $http.get("url")
        .then(function(data){
            $scope.data = data; //return if success on fetch
        }, function() {
            $scope.data = "error in fetching data"; //return if error on fetch
        });
    };

    $scope.loadData(); //return loadData function

}]);

edited Dec 1, 2016 at 20:11

answered Jul 8, 2015 at 5:21

Spade

5913 silver badges20 bronze badges

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

6 Comments

Whirlwind990 Over a year ago

would you put this within the MainController like I have or have it as a seperate service? does it matter?

Spade Over a year ago

@Whirlwind990 right inside the main controller, ill add my full controller without any filters one sec

Whirlwind990 Over a year ago

Hm, still no luck. So with your controller, I would be calling the HTML as: {{loadData.text}} ?

Spade Over a year ago

@Whirlwind990 no it would be {{data.text}} unless you are using a repeater where it would be the repeater scope. What console errors do you get when the code is implemented?

Whirlwind990 Over a year ago

console picked up I was missing the "http://" before loading the external Angular library.... Stupid error but fixed now :P anyway cheers, its all running smooth now, thanks for the controller!

|

Abdul23 · Accepted Answer · 2015-07-08 05:08:32Z

1

I think your response doesn't have a data key in it. It should be directly assigned to $scope.user like $scope.user=response.This should work for you.

answered Jul 8, 2015 at 5:08

Abdul23

6,1152 gold badges18 silver badges23 bronze badges

Comments

Nareshdhar Dwivedi · Accepted Answer · 2015-07-08 05:13:45Z

0

Hi you can use the following code snippet to get data from server

$http({
    url: "http://private-abc123-.apiary-mock.com/bus", 
    method: "GET",
    params: {user_id: user.id} // If you required params
 }).success(function(data, status, headers, config) {
      // You can set scope here 
      $scope.user = data;
 })

answered Jul 8, 2015 at 5:13

Nareshdhar Dwivedi

6354 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular http get not working

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related