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();
});
};
});
Related
This is my factory service and it is fetching data from a web service
var customersFactory = function ($http) {
var customer = [];
var getCustomersURL = "http://localhost:50340/Services/CustomerService.asmx/GetCustomers";
customer.XMLtoJSON = function (data) {
data = data.replace('<?xml version="1.0" encoding="utf-8"?>', ''); ;
data = data.replace('<string xmlns="http://tempuri.org/">', '').replace('</string>', '');
return $.parseJSON(data);
};
customer.GetCustomers = function () {
$http.post(getCustomersURL).success(function (data, status, headers, config) {
return customer.XMLtoJSON(data);
}).error(function (ata, status, headers, config) { });
};
return customer;
};
app.factory('customersFactory', customersFactory);
Now, this is being used in my controller
app.controller("CustomersController", function ($scope, customersFactory) {
var service = [];
service = customersFactory.GetCustomers();
$scope.Customers = service;
if ((typeof (service) != 'undefined') && service.length > 0) {
service.then(function (result) {
$scope.Customers = result;
});
}
});
The value of service is always undefined or empty. Data is not being passed from factory to controller. Im calling a simple web service, no fancy APIs or WCF.
It there was some static/dummy data, its working fine. The controller is fetching the data and is being displayed.
Where am I doing wrong?
Any help is greatly appreciated.
Thank you
change this line var customer = []; to this var customer = {};
Or better yet make it a class...
change this to return the promise:
customer.GetCustomers = function () {
return $http.post(getCustomersURL).error(function (data, status, headers, config) { });
};
and usage in the controller:
app.controller("CustomersController", function($scope, customersFactory) {
$scope.Customers = [];
customersFactory.getCustomers().success(function(data, status, headers, config) {
$scope.Customers = customersFactory.XMLtoJSON(data);
});
});
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)
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.
I would like to load the content of one of two JSON files, food1.json or food2.json. I am trying to do this from the html template:
<body ng-controller="MainCtrl" ng-init="init('food1')">
And then in the JS:
$scope.init = function (name) {
$scope.name = name;
$scope.category = name + ".json";
$scope.foodlist = {};
$http({
method: 'GET',
url: $scope.category,
}).success(function (data, status, headers, config) {
{
$scope.foodlist = data;
}
}).error(function (data, status, headers, config) {
// something went wrong :(
});
};
});
The category name is properly assembled: I get "I am food1" if I print I am {{ category }}. But no food items are printed. I think I am doing the JSON call wrong.
Here's my Plunkr
You have not injected $http in the controller. Change you code as
app.controller('MainCtrl', function($scope, $http) {
instead of
app.controller('MainCtrl', function($scope) {
DEMO