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"
});
}
}
});
Related
I am currently trying to update a DynamoDB table with information that I add into a HTML form. Every time that I run my program and submit my information, I get this error:
POST https://quovje1gi8.execute-api.us-east-2.amazonaws.com/production/accounts 400 ()
I can run my Lambda function on AWS, and add data to my table just fine. I have checked again and again to make sure that my permissions are established correctly and they are. I just can't seem to figure this out.
My front-end:
<form>
<label for="username">Add Username:</label>
<textarea id="username"></textarea>
<button id='submitButton'>Submit</button>
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script type="text/javascript">
var API_URL = 'https://quovje1gi8.execute-api.us-east-2.amazonaws.com/production/accounts';
$(document).ready(function(){
$.ajax({
type:'GET',
url: API_URL,
success: function(data){
$('#accounts').html('');
data.Items.forEach(function(accountsItem){
$('#accounts').append('<p>' + accountsItem.username + '</p>');
})
}
});
});
$('#submitButton').on('click', function(){
$.ajax({
type:'POST',
url: API_URL,
data: JSON.stringify({"username": $('#username').val()}),
contentType: "application/json",
success: function(data){
location.reload();
}
});
return false;
});
Lambda function:
'use strict';
console.log('Starting Function');
const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({region:'us-east-2'});
exports.handler = function(e, ctx, callback) {
var params = {
Item: {
user_id: ,
date: Date.now(),
username: "",
password: "",
name: "",
location: "",
field: "",
company: ""
},
TableName: 'accounts'
};
docClient.put(params, function(err, data){
if(err){
callback(err, null);
}
else{
callback(null, data);
}
});
}
// 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 made an httpRequest fetch some items using following code:
factory.getBanners = function() {
$http({
method: 'GET',
url: 'http://localhost:2100/v1/items/getBanners'
}).then(function successCallback(response) {
console.log(response);
return response;
});
};
In controller I handled it as following:
store.controller('bannerCtrl', ['$scope', 'productService', function($scope, productService){
$scope.init = function() {
$scope.banners = productService.getBanners();
}
$scope.init();
}]);
In front end I tried to display data using
<div ng-controller="bannerCtrl">
<div data-ng-repeat="banner in banners">
<li> {{banner.bannerAltText}} </li>
</div>
</div>
But it doesn't display anything. Neither it gives any error on console. How can I resolve this issue. Here banners is an array whose each element contains bannerAltText.
Your getBanners-function does not work the way you think it does. It returns nothing. The return statement in the then function only returns from that then-function, not from getBanners. The problem is that you are trying to use an asynchonous function in a synchronous way. Instead make getBanners return a promise:
factory.getBanners = function() {
return $http({
method: 'GET',
url: 'http://localhost:2100/v1/items/getBanners'
}).then(function successCallback(response) {
return response.data;
});
};
And use that promise in your controller:
$scope.init = function() {
productService.getBanners().then(function(banners) {
$scope.banners = banners;
});
}
$scope.init();
A return in a in .then() will be a promise, rather than the data. here is a better way to construct your code
factory.getBanners = function() {
return $http({
method: 'GET',
url: 'http://localhost:2100/v1/items/getBanners'
});
};
.
store.controller('bannerCtrl', ['$scope', 'productService', function($scope, productService){
$scope.init = function() {
productService.getBanners()
.then(function(response) {$scope.banners = response.data});
}
$scope.init();
}]);
want to download a JSON of beercat('bieres.json') in this.bieres
How could I do?
function() {
var app = angular.module('monStore', []);
app.service('dataService', function($http) {
this.getData = function() {
return $http({
method: 'GET',
url: 'bieres.json'
});
}
});
app.controller('StoreController', function($scope,dataService){
this.bieres = [];
dataService.getData().then(function(dataResponse) {
$scope.bieres = dataResponse.data;
});
...
});
I think it's my access by this.bieres that it's wrong,
the Json is loaded in the console, but a blank page is in result
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>