I am trying to load data from my JSON file through a $http call in my Factory and every time I run the code I get the same error. How can I fix this.
Error
TypeError: undefined is not a function
at Object.getFruitsData (http://localhost/test/JSON/js/controllers.js:12:18)
at new <anonymous> (http://localhost/test/JSON/js/controllers.js:3:16)
at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:3869:17)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:3880:23)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:7134:28
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:6538:34
at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:330:20)
at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:6525:11)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:5986:15)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js:5989:13)
the code is which I am using is down below.
fruitsFactory.js
app.factory('fruitsData', function($http, $log){
return{
getFruitsData: function(succescb){
$http({method:'GET', url:'json/testList.json'})
.succes(function(data){
succescb(data);
})
.error(function(data){
$log.warn(data);
});
}
};
});
controller.js
app.controller('fruitsController',['$scope','fruitsData', function($scope, fruitsData){
fruitsData.getFruitsData(function(fruits){
$scope.fruits = fruits;
});
}]);
you are never returning the data and you are creating a new function to pass into the factory function (mistake?)
try this:
app.factory('fruitsData', ['$http', '$log', function($http, $log) {
return {
getFruitsData: function() {
.success(function(fruitData) {
return fruitData;
})
.error(function(errorMessage) {
//log the error message
});
}
}
}]);
app.controller('fruitController', ['$scope', 'fruitsData', function($scope, fruitsData) {
fruitsData.getFruitsData().then(function(data) {
$scope.fruits = data;
});
}]);
Related
I'm trying to learn AngularJS and need some help. I'm using version 1.4.9 and I'm trying to create a service that will get JSON from a server but I'm getting the following error: "serviceName is not defined"
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
Here is my service:
app.service('serviceName', function ($http, $q) {
var url= "myURL";
function getData() {
return $http.get(url);
}
return {
getData: getData,
}
}
);
Here is my controller:
app.controller("myController", function ($scope, $http) {
serviceName.getData().then(function (response) {
$scope.myField = response.data;
});
});
You need to inject your service into the controller, like this:
app.controller("myController", function ($scope, serviceName) {
serviceName.getData().then(function (response) {
$scope.myField = response.data;
});
});
And you do not need $http, because that's used in the service ;)
// this is service where i m calling api
app.factory('users',['$http','$q', function($http , $q) {
return {
getUsers: function() {
var deferred = $q.defer();
var url = 'http://www.geognos.com/api/en/countries/info/all.jsonp?callback=JSONP_CALLBACK';
$http.jsonp(url).success(function (data, status, headers, config) {
console.log(data);
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
//this always gets called
console.log(status);
deferred.reject(status);
});
return deferred.promise;
}
}
}]);
//this is my controller where i calling getUsers();
app.controller('myCtrl', function($scope, users) {
$scope.data = users.getUsers();
})
while calling it gives me error
Uncaught ReferenceError: callback is not defined(anonymous function)
Plz give me proper solution so that i can see me api data in <div>. Thanks in advance
$http already returns a promise. There is no need to form a promise of a promise. Try this:
app.factory('Users', ["$http", function($http){
return {
getUsers: function(url) {
return $http({
url: url,
method: 'JSONP'
});
}
};
}]);
Controller:
app.controller("MyCtrl", ["$scope", "Users", function($scope, Users) {
$scope.data = [];
Users.getUsers('http://www.geognos.com/api/en/countries/info/all.jsonp?callback=JSONP_CALLBACK').then(function(response){
console.log(response.data);
$scope.data = response.data;
}).catch(function(response){
console.log(response.statusText);
});
}]);
Here the scenario is a bit different as you have to declare a $window.callback function.
Code
var app = angular.module("demoApp", []);
app.factory('UserService', ['$http', function ($http, $q) {
var getUsers = function () {
var url = 'http://www.geognos.com/api/en/countries/info/all.jsonp?callback=callback';
return $http.jsonp(url);
};
return {
GetUsers: getUsers
}
}]);
app.controller("demoController",
["$scope", "$window", "UserService",
function ($scope, $window, UserService){
UserService.GetUsers();
$window.callback = function (response) {
$scope.countries = response.Results;
}
}]);
Plunkr: http://plnkr.co/edit/MFVpj1sMqJpcDg3ZwQFb?p=preview
I want to fetch data from JSON file which is on my local machine. But I am not able to get the data. It is showing some cross domain error for $http.
Here is my code.
angular.module('myApp',[])
.controller('myCtrl', function ($scope, webtest) {
webtest.fetch().then(function (data) {
$scope.accounttype = data;
})
});
.factory('webtest', function($q, $timeout, $http) {
var Webtest = {
fetch: function(callback) {
return $timeout(function() {
return $http.get('webtest.json')
.then(function(response) {
return response.data;
});
}, 30);
}
};
return Webtest;
});
Anyone please help me how to display data from local JSON file?
Thanks in Advance.
It's very simple like
$http.get('phones/phones.json').then(function(response) {
$scope.phones = response.data;
});
Refer:http://stackoverflow.com/questions/21589340/read-local-file-in-angularjs
Don't you have an error message like "$http: is not defined" ?
I tried with a controller, this is working :
var ngApp = angular.module("ngApp", []);
ngApp.controller('myController', ['$http', function($http){
var thisCtrl = this;
this.getData = function () {
this.route = 'webtest.json';
$http.get(thisCtrl.route)
.success(function(data){
console.log(data);
})
.error(function(data){
console.log("Error getting data from " + thisCtrl.route);
});
}
}]);
If you haven't, use web developer tools (Ctrl+Shift+I in firefox).
If you haven't already done so. Try setting up a crossdomain policy for your application.
do you know what I am doing wrong? I want to read data from my json-file but i got the error that it can´t read the property getData.
myApp.service('jsonDataService', function ($http) {
this.getData = function () {
return $http({
method: 'GET',
url: '/jsonData/Stations.json'
});
}
});
controller:
myApp.controller('IndexController', ['$scope', function ($scope, jsonDataService) {
jsonDataService.getData().then(function (msg) {
$scope.msg = msg;
console.log(msg);
});
}]);
I am using ng in Visual studio in a mvc project.
path json-file: " Visual Studio 2015\Projects\Test\WebApplication\Scripts\jsonData\Stations.json"
In the controller code which you have shared, you have not injected 'jsonDataService' service properly.
It should be:
myApp.controller('IndexController', ['$scope', 'jsonDataService', function ($scope, jsonDataService) {
jsonDataService.getData().then(function (msg) {
$scope.msg = msg;
console.log(msg);
});
}]);
I'm developing my first AngularJS app using the Google Docs API to pass it JSON data.
This is an example of the factory I'm using:
app.factory('Data', ['$http', 'apiKeys', function($http, apiKeys){
var googleDocs = 'https://spreadsheets.google.com/feeds/list/';
return {
news:function () {
return $http.get(googleDocs + apiKeys.googleDoc +'/1/public/values?alt=json', {cache: true});
},
updates:function () {
return $http.get(googleDocs + apiKeys.googleDoc +'/2/public/values?alt=json', {cache: true});
},
docs:function () {
return $http.get(googleDocs + apiKeys.googleDoc +'/3/public/values?alt=json', {cache: true});
}
}]);
I wanted to clean up a bit the code and decided to use services instead of making the calls in the controller itself. It works normally, but it's a pain in the ass the fact that I still need to write long $scopes because of the structure of the Google API. This is how I get the values in the controller:
app.controller('homeCt', ['$scope', 'Data', function ($scope, Data){
Data.news().success(function (data) {
$scope.totalNews = data.feed.entry.length;
});
}]);
Is there a way that I can set the factory service to pass me the data just using:
$scope.totalNews = Data.news()
Or at least removing the 'feed.entry'?
Data.news().success(function (data) {
$scope.totalNews = data.length;
});
Thank you very much!
example of service - resolve the success with the data you want
app.service('Data', ['$http', 'apiKeys', function($http, apiKeys){
var googleDocs = 'https://spreadsheets.google.com/feeds/list/';
this.news =function(){
return $http.get(googleDocs + apiKeys.googleDoc +'/1/public/values? alt=json', {cache: true})
.then(function(data){
return data.feed.entry.length;
});
}
}]);
the controller - since you already resolved the data in service hence..
app.controller('homeCt', ['$scope', 'Data', function ($scope, Data){
Data.news().then(function (data) {
$scope.totalNews = data;
});
}]);
working example
var app = angular.module('app', ['ionic'])
.service('Data', ['$http',
function($http) {
var googleDocs = 'https://spreadsheets.google.com/feeds/list/1aC1lUSxKatfxMKEy1erKDSAKgijSWOh77FDvKWhpwfg/1/public/values?alt=json';
this.news = function() {
return $http.get(googleDocs, {
cache: true
}).then(function(res) {
return res.data.feed.entry;
});
}
}
])
.controller('homeCt', ['$scope', 'Data',
function($scope, Data) {
Data.news().then(function(data) {
console.log(data);
})
}
]);
I'll give you a way of doing it, a way that I don't recommend at all (a service should not handle the scope), but for me it is the only way you have if you don't want to destroy the "async" of your ajax call :
app.factory('Data', ['$http', 'apiKeys', function($http, apiKeys){
var googleDocs = 'https://spreadsheets.google.com/feeds/list/';
return {
news:news,
updates: updates,
[...]
}
function news(scopeValue) {
$http.get(googleDocs + apiKeys.googleDoc +'/1/public/values?alt=json', {cache: true}).success(function(data){
scopeValue = data;
});
}]);
and then, call it that way in your controller :
Data.news($scope.totalNews);