I'm trying to integrate jsreport with angularjs project. I can post jsreport json data but do not know how to handle the reponse to render the jsreport in the browser. Anyone help me
.controller('View1Ctrl', [ '$scope', '$http',function($scope, $http) {
var onSuccess = function (data, status, headers, config) {
$scope.data = data;
};
var onError = function (data, status, headers, config) {
$scope.error = status;
}
var datajson = {
template:{'shortid':'S1Auk01mb'},
}
var postReq = {
method: 'POST',
url: 'http://localhost:8005/api/report',
data:datajson
};
$http(postReq).success(onSuccess).error(onError);
var getReq = {
method: 'GET',
url: 'http://localhost:8005/api/report'
};
$http(getReq).success(onSuccess).error(onError);
}]);
Change your final get request to look like this:
$http(getReq)
.then(response => {
console.log(response.data);
})
.catch(errorpayload => {
console.log(errorpayload.data);
});
You can then do what you need to with the data object from response. (I logged it out, so you can see what the data will look like.)
Related
I am trying to combine response of one POST data with another input JSON so that it can do another POST function.
Controller 1:-
$scope.master = {};
$scope.addChild = function(net) {
$scope.master = angular.copy(net);
$http.post("url",$scope.master).then( function(data) {
$scope.childData = data;
$scope.dataName = $scope.master.Name;
growl.success("Created a new Child");
console.log(data);
},function (data, status, headers, config) {
growl.error("Something went wrong");
});
console.log($scope.master);
};
Now I want to add the response of this controller ie; $scope.segments = data; to 2nd controller:-
Controller 2:-
$scope.addOverall = {Child: []};
$scope.Create = function() {
$http({
method : 'POST',
url : 'api',
data : $scope.addOverall
}).success(function(data, status, headers, config) {
growl.success("Created a Table");
console.log(data);
},function (data, status, headers, config) {
growl.error("Something is wrong");
});
};
So now , my response data from controller 1 must combine with 2nd controller input over here {Child: []}; inside the [ ] How can I achieve that?
Controller 1:
If you get result in data then use $rootscope for other variable
$rootScope.myGlobalVariable = [] //if response is array or object
$http.post("url",$scope.master).then( function(data) {
$rootScope.myGlobalVariable = data;
Controller 2:
success(function(data, status, headers, config) {
$scope.mylocalVariable = data;
final values in controller 2
for(var i=0; i<$scope.localVariable.length; i++)
{
$rootScope.myGlobalVariable.push($scope.localVariable[i]);
}
console.log('combine json values', $rootScope.myGlobalVariable);
I hope this answer is work for You.
Thanks
How to pass $scope object in http.get() to express and get the data. Here is my Code and can anyone tell me what is wrong with it?
So the endpoint url is http://myhost:8080/employees/123. Here I need to pass the empID dynamically from my controller to express server. My code works without passing empid and gets the complete list.
angularJs controller
$scope.eid = "123";
$http.get('/employees/:empId=' + $scope.eid)
.success(function (data, status) {
$scope.employeeInfo = data;
}).error(function (data, status) {
});
server-side code
app.get("/employees/:empId", function(req,res) {
var ServerOptions = {
host: 'myHost',
port: 8000,
path: '/employees/:empId',
method: 'GET'
};
var Request = http.request(ServerOptions, function (Response) {
...
});
});
In the angular code you should:
$scope.eid = "123";
$http.get('/employees/' + $scope.eid)
.success(function (data, status) {
$scope.employeeInfo = data;
}).error(function (data, status) {
});
and in express
app.get("/employees/:empId", function(req,res) {
var ServerOptions = {
host: 'myHost',
port: 8000,
path: '/employees/' + req.params.empId,
method: 'GET'
};
var Request = http.request(ServerOptions, function (Response) {
...
});
});
This is my controller.
sampleApp.controller('SupplierController', ['$scope', '$http', 'SupplierService', function ($scope, $http, SupplierService){
$scope.Suppliers = [];
$scope.getSuppliers = function() {
SupplierService.getSuppliers().then(function(data) {
$scope.Suppliers = data;
});
};
$scope.editSupplier = function(supplier) {
SupplierService.editSupplier(supplier);
editMode = false;
};
$scope.getSuppliers();
}]);
This is my service.
sampleApp.factory('SupplierService', function($http, $q) {
var SupplierService = {};
var SupplierList = [];
SupplierService.getSuppliers = function() {
var Info = {};
Info.Action = "GET";
Info = JSON.stringify (Info);
var req = {
url: SupplierURL,
method: 'POST',
headers: { 'Content-Type': 'application/json'},
data: Info
};
if ( SupplierList.length === 0 )
{
return $http(req).then(function (response) {
SupplierList = response.data
return response.data;
});
}
else
{
var deferred = $q.defer();
deferred.resolve(SupplierList);
return deferred.promise;
}
};
SupplierService.addNewSupplier = function(supplier) {
var Info = {};
Info.Action = "ADD";
Info.SupplierName = supplier.name;
Info.SupplierMobile = supplier.mobile;
Info = JSON.stringify (Info);
var req = {
url: SupplierURL,
method: 'POST',
headers: { 'Content-Type': 'application/json'},
data: Info
};
$http(req)
.success(function(data) {
alert ('Supplier update is successful.');
})
.error(function (data, status, headers, config) {
alert ('Supplier update error.');
});
};
SupplierService.editSupplier = function(supplier) {
var Info = {};
Info.Action = "UPDATE";
Info.SupplierID = supplier.id;
Info.SupplierName = supplier.name;
Info.SupplierMobile = supplier.mobile;
Info = JSON.stringify (Info);
var req = {
url: SupplierURL,
method: 'POST',
headers: { 'Content-Type': 'application/json'},
data: Info
};
$http(req)
.success(function(data) {
alert ('Supplier update is successful.');
})
.error(function (data, status, headers, config) {
alert ('Supplier update error.');
});
};
return SupplierService;
});
What i want is, only when http call for editSupplier is successful then only i want this line to be executed.
editMode = false;
Currently above line is in $scope.editSupplier function. so irrespective of success or failure it is getting called. How to move this line to service??
Any better approach will be highly appreciated.
The easiest way, based on your current setup, would be to return $http(req) (as that is a promise). So the end of editSupplier would say:
return $http(req);
And in your controller, you could do:
SupplierService.editSupplier(supplier).success(function(response) {
editMode = false;
});
You could additionally chain the .error handler if you have something specific to do in the case of an error.
#tandrewnichols stole my initial answer so I'll offer the alternative.:p
Move editMode into the service and use a getter to check the value of editMode.
Also, are you intending to make editMode a global variable in your application?
I am trying to retrieve some sample values from mysql database and display it to my view using angularjs. I am pretty new to angular and I am trying to use $http.get to get my data. The following is my code
Angular Code
angular
.module('sampleApp.service.product', [])
.factory('productsService', [
'$http',
function ($http) {
return {
getProducts: function () {
// return $http.get("/Home/GetTweets");
return $http({
method: 'GET',
url: '/api/Products'
}).success(function (data) {
alert("success");
alert(data);
}).error(function (error) {
//Showing error message
alert("failed");
$scope.status = 'Unable to retrieve products' + error.message;
});
alert(data) returns [object,Object]
My Controller code has the following
public class productsController : ApiController
{
public IEnumerable<Product> Get()
{
ProductEntities context = new ProductEntities();
var _products = from p in context.Products.AsEnumerable() select p;
return _products;
}
}
On debug I am getting the values in DB int the _products. Please help me out.Thanks In advance!
enter code here
your code is successful as i can see
put console.log(data); instead of alert(data); and then you can see the data in the browser console.
.factory('productsService', [ '$http','$q', function ($http,$q) {
return {
getProducts: function () {
var deferred = $q.defer();
$http({
method: 'GET',
url: '/api/Products'
}).success(function (data) {
deferred.resolve(data);
}).error(function (error) {
deferred.reject(data);
});
return deferred.promise;
}
}
In the Conteroller,
productsService.getProducts().then(function(data) {
//success
$scope.products = data.rows;
console.log($scope.products);
}, function() {
//flier
});
I'm trying to write an Angular service and it seems like there is something missing. My problem is its not returning any value to my Angular controller
getPrepTimes() method is not returning the http data
But when I check the network (via Chrome dev tools) it will correctly call the external api and return a json object as a response
#my service
'use strict';
angular.module('recipeapp')
.service('prepTimeService',['$http', function($http){
this.prepTime = getPrepTimes();
function getPrepTimes(){
$http({
url: '/prep_times/index.json',
method: 'GET'
})
.success(function (data, status, header, config){
return data;
});
};
}
]);
#controller
'use strict';
angular.module('recipeapp')
.controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
$scope.prep_time = prepTimeService.prepTime;
}]);
When I checked the method getPrepTimes() with returning a string it works. What could be missing here?
A couple things are wrong with the above. You assign this.prepTime to getPrepTimes(). The () there will invoke getPrepTimes immediately, and not when you actually call it! You also need to utilize callbacks to get your data back and use it:
angular.module('recipeapp').service('prepTimeService',['$http', function($http){
this.prepTime = getPrepTimes;
function getPrepTimes(callback) {
$http({
url: '/prep_times/index.json',
method: 'GET'
}).success(function (data, status, header, config){
callback(data);
});
};
}]);
And now use it like so:
prepTimeService.prepTime(function(data) {
$scope.prep_time = data;
});
Calls to the $http service are async, which means you need to return a promise (and not a value):
this.prepTime = function() {
return $http({
url: '/prep_times/index.json',
method: 'GET'
});
};
And on the controller:
angular.module('recipeapp')
.controller('recipeCtrl', ['$scope', 'prepTimeService', function($scope, prepTimeService){
$scope.prep_time = prepTimeService.prepTime()
.success(function (data, status, header, config){
$scope.someVar = data;
});
}]);
Wrap answer with promise:
var self = this;
var deferred = $q.defer();
self.getPrepTimes = function() {
$http({
url: '/prep_times/index.json',
method: 'GET'
})
.success(function(data, status, headers, config) {
if (data.error === undefined) {
deferred.resolve(data);
} else {
if (data.error !== undefined) {
} else {
deferred.reject(data);
}
}
}).error(function(data, status, headers, config) {
deferred.reject(data);
});
return deferred.promise;
};
In controller call it:
prepTimeService.getPrepTimes().then(function(result) {
$scope.prep_time = result;
},
function(error) {
// show alert
});