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
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
});
});
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.
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.
Related
I have a page where we get a list of users using angular $http from backend as shown below.
myApp.controller("MyCntrl", function ($scope, $http) {
$scope.users= [];
$scope.countries = function () {
$http.get(url).success(function (data, status, headers, config) {
return data;
});
};
$scope.getUsers = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.users= data;
});
};
});
And my html is like:
<div ng-app="myApp" ng-controller="MyCntrl" ng-init="getUsers()">
<p ng-repeat="user in users">{{user.UserName}}</p>
<select>
<option ng-repeat="country in countries">{{country.CountryName}}</option>
</select>
</div>
Everything is working fine up to displaying users.
But the code after ng-repeat of users is not working. I'm not able to see the list of countries in the dropdown.
I can see the json list of both users and countries in firebug.
Can anyone help me on this?
My countries Json is
[{CountryId:1,CountryName:"India"}]
What i've observed is that the angular code is not working after the first ng-repeat of users.
When i try to see the length of countries json like
<p>{{countries.length}}</p>
It is just printing {{countries.length}} in browser
You can set the returned data for $scope.countries just as you've done for $scope.users, except you don't need to define a function that you'd call in your view to get all the countries.
Instead, call this function in your controller which in turn will set the countries variable into the scope:
this.getCountries = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.countries = data;
});
};
// call the method to get the countries
this.getCountries();
Note that in your code you have return = data which might be causing a syntax error.
You will have to use ng-options instead in the case of <select>:
<select ng-model="selectedCountry" ng-options="country.countryName for country in countriesData">
</select>
Edit:
Replace this:
$scope.countries = function () {
$http.get(url).success(function (data, status, headers, config) {
return data;
});
};
By this:
$http.get(url).success(function (data, status, headers, config) {
$scope.countriesData = data;
});
NOTE: Checked that url is defined !
You have call function in ng-repeat that's why its not working properly.Correct code should be like below
myApp.controller("MyCntrl", function ($scope, $http) {
$scope.users= [];
$scope.getCountry = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.countries = data;
});
};
$scope.getUsers = function () {
$http.get(url).success(function (data, status, headers, config) {
$scope.users= data;
$scope.getCountry();
});
};
});
I have an SPA. I have some basic init data that I'm fetching from the server that I'm certain that I want to defer every page load until that data is loaded. (this data contains whether the user is logged in, permissions, and other vital stuff). So if I have a service for fetching and accessing that data, a page controller might start execution before I have the data, which is bad.
I can't use a promise either, partly because it doesn't solve my problem that I don't want the page to begin loading, and partly because it can't be updated easily and I don't want to always use a promise to fetch this basic data
this is what i've tried so far:
my service
app.factory('AppData', function($q, $http){
var appData = {};
$http
.post( "/api/GeneralActions/getInitData", {
}).success(function (data, status, headers, config) {
appData = data;
}).error(function (data, status, headers, config) {
});
return {
getAppData: function () {
return appData;
}
};
});
my page controller:
app.controller('MainPreferences', function($scope, AppData){
// when this gets executed, appData is null
$scope.appData = AppData.getAppData();
});
Try following snippet
app.factory('AppData', function($q, $http){
var appData = {};
$http
.post( "/api/GeneralActions/getInitData", {
}).success(function (data, status, headers, config) {
//appData = data;
angular.extend(appData, data);
}).error(function (data, status, headers, config) {
});
return {
getAppData: function () {
return appData;
}
};
});
Instead creating appData object again, just extend it with data . By this way your appData object pointer will not change and controllers will also get updated.
Are you using ngRoute? If so, it sounds like what you want is to have a resolve property on your routes to require them to load something before changing the path to the new route.
See the ngRoute docs and search for resolve.
If you are using the stock Angular ngRoute routing system, you can use the resolve property on the route to specify a map of promise-returning functions. The route controller will not be initialized before these promises are all resolved, and as a bonus, the promises' results are injected into the route controller.
For example:
$routeProvider.when('/foo', {
controller: 'fooCtrl',
resolve: {
bar: function($http) { return $http.get('/load/the/bar'); }
}
});
// bar is injected from the route resolve
myApp.controller('fooCtrl', function($scope, bar) {
$scope.bar = bar;
});
I think it should be:
app.factory('AppData', function($q, $http){
var appData = {};
return {
getAppData: function () {
$http.post( "/api/GeneralActions/getInitData", {}).success(function (data, status, headers, config) {
return data;
}).error(function (data, status, headers, config) {
});
}
};
});
this is my angular code:
samirsoftApp.controller("OrderCtrl",function($scope,$http){
$scope.currentStep=1;
$scope.defaultQuantity=1;
$scope.item={};
$scope.getItem = function(){
$http.get('/test/getItemDetails/')
.success(function(data, status, headers, config) {
$scope.$apply(function(){
$scope.item = data;
});
console.log($scope.item);
})
.error(function(data, status, headers, config) {
console.log(data)
});
};
});
when it request and get answer, it does not update my item object, so I used $apply and it did not work and throw an error:
Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.13/$rootScope/inprog?p0=%24digest
S/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:6:417
.....
I also tried
$timeout(function() {
$scope.item = data;
}, 0);
instead of $apply` but it prints a null object in consol
it's like this:
samirsoftApp.controller("OrderCtrl",function($scope,$http,$timeout){
$scope.currentStep=1;
$scope.defaultQuantity=1;
$scope.item={};
$scope.getItem = function(){
$http.get('/test/getItemDetails/')
.success(function(data, status, headers, config) {
$timeout(function() {
$scope.item = data;
}, 0);
console.log($scope.item);
})
.error(function(data, status, headers, config) {
console.log(data)
});
};
});
What should I do for my object to be updated after a http request.
thanks
You can assign the data returned by $http.get() request like this
$http.get('/test/getItemDetails/')
.success(function(data, status, headers, config) {
$scope.item = data;
console.log($scope.item);
})
.error(function(data, status, headers, config) {
console.log(data);
});
};
No need for $apply as angular automatically updates $scope
I suspect the problem is elsewhere with your code
Possibly:
You defined function#getItem which contained the $http request but where did you call it?
Make sure the call to URL /test/getItemDetails/ is
returning data by manually browsing or by using a utility like POSTMAN.
being called with the proper URL - try checking in developer tools > network for 404 Errors
I have updated your code - demo here - http://jsbin.com/notudebiso/1/edit?html,js,output
(using a $http call to github api)
I'm trying to create a live search function with AngularJS. I got a input field:
<input type="text" placeholder="Search" data-ng-model="title" class="search">
it there away to pass the search keyword inside the scope so i can perform a live search (JS) and display the results directly to the DOM
var app = angular.module("DB", []);
app.controller("Controller", function($scope, $http) {
$scope.details = [],
$http.defaults.headers.common["Accept"] = "application/json";
$http.get('http://api.org/search?query=<need to pass search name here>&api_key=').
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
//handle errors
});
});
Inside the angular controller use a watch expression.
$scope.$watch('title', function (newValue, oldValue) {
if(newValue != oldValue) {
$http.get('http://api.org/search?query=' + newValue + '&api_key=')
.success(function(data, status, headers, config) { /* Your Code */ })
.error(function(data, status, headers, config) { /* Your Code */ });
}
});
You can use watch as #Justin John proposed, or can use ng-change
when using ng-change your controller should look something like this
app.controller("Controller", function($scope, $http) {
$http.defaults.headers.common["Accept"] = "application/json"; //should be moved to run block of your app
$scope.details = [];
$scope.search= function() {
$http.get("http://api.org/search?query="+$scope.title+"&api_key=")
.success(function(data, status, headers, config) { .... })
.error(function(data, status, headers, config) {//handle errors });
}
});
and your html
<input type="text" placeholder="Search" data-ng-model="title" class="search" data-ng-change="search()">
<input type="text" placeholder="Search" data-ng-model="title" class="search" data-ng-change="search()">
app.controller("Controller", function($scope, $http) {
$scope.details = [],
$scope.search= function() {
var url = "http://api.org/search?query="+$scope.title+"&api_key=";
$http.defaults.headers.common["Accept"] = "application/json";
$http.get(url).
success(function(data, status, headers, config) {
}).
error(function(data, status, headers, config) {
//handle errors
});
};
});
I am in the process of learning AngularJS, and have the following code (from video tutorials I'm going through).
eventsApp.controller('EventController',
function EventController($scope, eventData) {
eventData.getEvent(function(event) {
$scope.event = event;
});
I am confused about this bit of the JavaScript eventData.getEvent(function(event) { } I admit that my JavaScript knowledge isn't super, but JavaScript functions are so strange in this regard compared to C# or Java functions/methods.
I understand that eventData is my AngularJS service and on that, I have a method called getEvent() but that does not take in an event object as a parameter! Here is my AngularJS service code:
eventsApp.factory('eventData', function($http, $log) {
return {
getEvent: function(successcb) {
$http({ method: 'GET', url: 'data/event/1.json' }).
success(function(data, status, headers, config) {
successcb(data);
}).
error(function(data, status, headers, config) {
$log.warn(data, status, headers, config);
});
}
}
});
Even when I tell myself "ignore object types and classes (thinking along C# / Java lines) and think of it as a plain object", then still I don't get where the event parameter in eventData.getEvent(function(event) { } came from!
Can someone please clarify?
Thanks
You're not actually passing event as the parameter, you're passing that entire function as the parameter as a callback. When getEvent reaches .success, it's calling that function (called successcb in the service), and passing data (where data is actually the event parameter that you're seeing in your controller.
It actually looks more like this:
eventsApp.factory('eventData', function($http, $log) {
return {
getEvent: function() {
$http({ method: 'GET', url: 'data/event/1.json' }).
success(function(data, status, headers, config) {
// successcb(data);
// this is essentially what's happening, except in your controller...
// ...so, this won't actually work because you don't have $scope in this service
// but it's the same idea
successcb(data);
var successcb = function(event) {
$scope.event = event;
};
}).
error(function(data, status, headers, config) {
$log.warn(data, status, headers, config);
});
}
}
});
Javascript functions can be treated as inline objects and can be passed as parameters.
for example you can have something like the below (pseodo code):
var x = function fun(){alert ('hi');};
callerFunction(x);
which is same as
callerFunction(function fun(){alert ('hi');});
Above is what is the concept behind and all modern JS libraries (like jQuery) leverage it to include all callback functions as parameters.
Your service method is waiting for variable REFERENCE_TO_FUNCTION.
Maybe this example will make it more clear:
eventsApp.factory('eventData', function($http, $log) {
return {
getEvent: function(REFERENCE_TO_FUNCTION) {
$http({ method: 'GET', url: 'data/event/1.json' }).
success(function(data, status, headers, config) {
REFERENCE_TO_FUNCTION(data);
}).
error(function(data, status, headers, config) {
$log.warn(data, status, headers, config);
});
}
}
});