I have created a factory and making $HTTP request.I have used ng-repeat to show data.Getting data from factory and adding it to $scope variable in controller is unable to show data.The Code is as mentioned below.
I used console.log to get the json returned and it is as mentioned below
JSON:
[{"searchName":"this is test Job","id":"2"},{"searchName":"Job new","id":"1"}]
Angular JS Code:
<script type="text/javascript">
var formApp = angular.module("saveSearch",[]);
formApp.controller("saveSearchController",function($scope,saveServiceSearch)
{
saveServiceSearch.getLatestSaveSearch().then(function(data){
$scope.saveSearches = data;
});
});
formApp.factory('saveServiceSearch', function($http) {
return {
getLatestSaveSearch: function() {
var url = "/job_search_crud.html?act=gtSearchSv";
return promise = $http.get(url,{cache: false});
promise.success(function(data,status, headers, config){
return $data;
});
promise.error(function(data,status, headers, config){
alert("::Request Failed::");
});
}
};
});
</script>
HTML:
<html>
<body ng-app="formApp">
<div ng-controller="saveSearchController">
<table>
<tr ng-repeat="saveSearch in saveSearches" >
<td>{{saveSearch.searchName}}</td>
</tr>
</table>
</div>
</body>
</html>
Try this using $q
myModule.factory('saveServiceSearch', function($q, $timeout, $http) {
var getLatestSaveSearch = function() {
var deferred = $q.defer();
var url = "/job_search_crud.html?act=gtSearchSv";
var data = $http.get(url,{cache: false});
$timeout(function() {
deferred.resolve(data);
}, 2000);
return deferred.promise;
};
return {
getLatestSaveSearch: getLatestSaveSearch
};
});
Edit:
<script type="text/javascript">
var formApp = angular.module("saveSearch",[]);
formApp.controller("saveSearchController",function($scope,saveServiceSearch)
{
saveServiceSearch.getLatestSaveSearch().then(function(data){
$scope.saveSearches = data;
});
});
formApp.factory('saveServiceSearch', function($http) {
return {
getLatestSaveSearch: function() {
var url = "/job_search_crud.html?act=gtSearchSv";
return $http.get(url,{cache: false});
}
}});
</script>
Related
I am stuck with this code for very long time and apply all the patches available on net but didn't find the effective one.It is still giving error while calling service from controller.
Here the code below
<HTML ng-app="myApp">
<body ng-controller = "myCtrl">
<div>{{me}}</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
var app = angular.module('myApp',[])
app.controller('myCtrl',function($scope,myService){
myService.getx(function(data){
console.log(data);
$scope.me = "data";
});
});
</script>
<script>
app.service('myService',function($http,callback){
this.getx= function(){
return $http({
method: "GET",
url: "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"
}).then(function (response) {
console.log(response)
return callback(response);
}, function (error) {
throw error;
console.log("Error",error)
});
}
});
</script>
</HTML>
i'd rewrite it like this:
APP CTRL:
var app = angular.module('myApp',[])
app.controller('myCtrl',function($scope,myService){
myService.getx()
.then(
function(data){ //handle the $http promise here
console.log(data);
$scope.me = "data";
},
function(err){
console.log('error:' + err);
});
});
SERVICE:
app.service('myService',function($http){
return {
getx: function() {
return $http({ //the $http returns a promise
method: "GET",
url:"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"
});
}
}
});
.factory('MY', function($http){
return {
mustafa: function(){
var factory = {};
var url = '/uzak/remote.php?callback=JSON_CALLBACK';
var yarro = $http.get(url).success(function(response){
return response.data);
});
return yarro;
}
}
})
.controller('nbgCtrl', function() {
$scope.mangas = MY.mustafa();
})
I wanna use json data above like. But it isn't working. Could you guys help me?
You can return the promise, and then resolve it in the controller:
.factory('MY', function($http){
return {
mustafa: function() {
var url = '/uzak/remote.php?callback=JSON_CALLBACK';
return $http.get(url);
}
};
})
Finally, you have to inject the service to the controller.
.controller('nbgCtrl', function($scope, MY) {
MY.mustafa().success(function(response) {
$scope.mangas = response.data;
);
});
How can I get the data from two JSON files, named gridData.json and AddedData.json simultaneously using $http.get function?
PApp.controller('ProjectDataController', function($scope, $http) {
$scope.addProject=function($scope){
};
$scope.getData = function(){
$http.get('AddedProjects.json').success(function(data) {
$scope.ProjectStat = data;
});
$http.get('JSON/gridData.json').success(function(data) {
$scope.ProjectStat = data;
});
};
});
Better is to use two seperate variables on the scope. But if you have your reasons to keep it the same objects. You can merge them like below.
PApp.controller('ProjectDataController', function($scope, $http) {
$scope.ProjectStat = {};
$scope.addProject=function($scope){
};
$scope.getData = function(){
$http.get('AddedProjects.json').success(function(data) {
angular.extend($scope.ProjectStat, data);
});
$http.get('JSON/gridData.json').success(function(data) {
angular.extend($scope.ProjectStat, data);
});
};
});
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);
I'm trying to traverse through the properties of a json file. You can see my code in http://jsfiddle.net/gerlstar/qRV7k/. In line 38, it should return the values of "name" and "age" in the console. Anyone know what im doing wrong?
var app = {};
app.model2 = Backbone.Model.extend({
defaults: {
age: '',
name: ''
}
});
app.collec = Backbone.Collection.extend({
model: app.model2,
url: 'http://echo.jsontest.com/name/betty/age/22',
parse: function (response) {
return response;
},
initialize: function () {
console.info("init ...");
this.fetch({
success: function (obj, s, jqxhr) {
// console.log(s);
},
error: function (funds) {
console.error("Error in fetch in collec");
}
});
}
});
app.model_with_collec = Backbone.Model.extend({
initialize: function(){
//console.info(this);
this.set({
my_kids: new app.collec()
});
var mo = this.get('my_kids').models;
console.log(mo);
console.log(mo.attributes);//undefined is returned
}
});
new app.model_with_collec();
If you run your code like this it will be executed sequentially and will reach the console.log before the server even respond to the rest call. So it's normal that it prints undefined.
Here the code that will print what you want :
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<!-- /inladen bower_components -->
<script>
var app = {};
app.model2 = Backbone.Model.extend({
defaults: {
age: '',
name: ''
}
});
app.collec = Backbone.Collection.extend({
model: app.model2,
url: 'http://echo.jsontest.com/name/betty/age/22',
parse: function(response) {
return response;
},
initialize: function() {
console.info("init ...");
this.fetch({
success: function(obj, s, jqxhr) {
// console.log(s);
},
error: function(funds) {
console.error("Error in fetch in collec");
}
});
}
});
app.model_with_collec = Backbone.Model.extend({
initialize: function() {
//console.info(this);
this.set({
my_kids: new app.collec()
});
this.get('my_kids').bind('reset', this.logAttributes, this);
},
logAttributes: function() {
var mo = this.get('my_kids').models;
console.log(mo);
console.log(mo[0].attributes);
}
});
new app.model_with_collec();
</script>
</head>
</html>