angularjs how can pass multipul parameter to api - angularjs

How can I pass mutipul parameters from angularjs -to WebAPi My Api as its Required two parameters
public IHttpActionResult GetData(int pagesize,int Totalpages){---}
angularctrls.js
function GetData() {
var PageDetails={
'currentpage': $scope.currentPage,
'pagesize':$scope.pagesize
}
HomeFactory.GetDat(PageDetails).then(function () {
})
}
Factory.js
EmployeeServiceFactory.GetDat = function (PageDetails) {
return $http({
url:WebAPi+'Home/GetData/',
method: 'GET',
data: PageDetails,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
Getting Error as
Failed to load http://localhost:3084/Home/GetData/%7B%22currentpage%22:1,%22pagesize%22:5%7D: No 'Access-Control-Allow-Origin' header is present on the requested resource

try params instead of data like below:
EmployeeServiceFactory.GetDat = function (PageDetails) {
return $http({
url:WebAPi+'Home/GetData/',
method: 'GET',
params: PageDetails,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}

I think you can put data as an object.
EmployeeServiceFactory.GetDat = function (PageDetails) {
return $http({
url:WebAPi+'Home/GetData/'+PageDetails,
method: 'GET',
data: {page_details:
PageDetails, foo: 'bar'}, headers: { 'Content-Type': 'application/x-www-form-urlencoded'
}
})
}

Related

Error Using Method Post AngularJs

can someone fix it, when i using postman my restfull is good but not from my client side
var req = {
method: 'POST',
url: 'http://localhost:8098/getfiles',
headers: {
'Content-Type': 'multipart/form-data',
},
data: { 'selectedFiles': 'D:\\quadtech\\Intellegent\\AppSpringBoot\\input\\bismillah.txt' }
}
return $http(req).then(function(response){console.log(response); return response;}, function(){});
error in my console is
POST http://localhost:8098/getfiles 500 ()
this is request from postman
Send using formData instead of data:
var req = {
method: 'POST',
url: 'http://localhost:8098/getfiles',
headers: {
'Content-Type': 'multipart/form-data',
},
formData: {
'selectedFiles': fs.createReadStream('D:\\quadtech\\Intellegent\\AppSpringBoot\\input\\bismillah.txt') }
}
return $http(req).then(function(response){console.log(response); return response;}, function(){});
see the docs: https://github.com/request/request#forms

when i try to posting data from angular to server Why data is not Bindig at serverside

Here im trying to posting data from angular to api server in angular side it maping properly but wht it not binding at serverside
Emplyeectr.js
Emplyeeserve.js
this.saveEmp = function (savingdata) {
var sersave = $http({
url: Privateurl2+'SaveEmpData',
method: "POST",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: JSON.stringify(savingdata),
content: { 'content-type': 'application/Json' }
})
return sersave;
}
Emplyeectrl.js
$scope.SaveDb = function (user) {
if ($scope.Validate = "UpdateEmpDetails")
$scope.Submitted = true;
if ($scope.isFormValid) {
var savingdata = {
EmpName: $scope.User.EmpName,
Gen_Name: $scope.User.Gen_Name,
Email: $scope.User.Email,
Psw: $scope.User.Psw,
Cnt_Id: $scope.User.Cnt_Id,
Sts_Id: $scope.User.Sts_Id,
City_Id: $scope.User.City_Id,
}
var saving = Myservice.saveEmp(savingdata);
saving.then(function () {
})
}
}
When i trace it from Fiddler it passing data as
{"EmpName":"Aa1.com","Gen_Name":"Male","Email":"Das#gmail","Psw":"1478","Cnt_Id":2,"Sts_Id":4,"City_Id":7}
The content you are posting is not in the correct format. You are trying to post JSON but telling the server it's form data.
You should change
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
to
headers: { 'Content-Type': 'application/json' },
you should probably remove the content property as it's not in the AngularJS docs and probably a little mis-leading.

Pass parameter to webmethod $http post

I need to pass parameter to the webmethod below. I have value Param which need to be passed to webmethod.
var param='test'
$http({
method:"POST",
url:'/sites/Demo/_layouts/15/demo/Demo.aspx/mywebmethod',
data: JSON,
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data)
{
$scope.Jobject = data.data.d;
});
Please advise.
You may pass params key for parameters or data key form body data which is not available in GET method
var params = {
name: 'This is parameter query'
}
var data = {
name: 'This is body data'
}
$http({
method: 'POST',
url: '/sites/Demo/_layouts/15/demo/Demo.aspx/mywebmethod',
data: data,
params: params
}).then(function successCallback(response) {
$scope.Jobject = response.data.d;
}, function errorCallback(response) {
console.log(response);
});
or simply use
$http.post('/sites/Demo/_layouts/15/demo/Demo.aspx/mywebmethod', data).then(function successCallback(response) {
$scope.Jobject = response.data.d;
}, function errorCallback(response) {
console.log(response);
});
You can use $http.post
$http.post('/sites/Demo/_layouts/15/demo/Demo.aspx/mywebmethod', params)
For more details check official documentation
$http({
method:"POST",
url:'/sites/Demo/_layouts/15/demo/Demo.aspx/mywebmethod',
data: JSON,
headers: {
'Content-Type': 'application/json'
},
params: {name: param}
})
.then(function(data)
{
$scope.Jobject = data.data.d;
});
assuming you want to send that params string as a name

Angular resource custom post method

I need to post data to a SharePoint list, and I want to clean up my code by using
a resource factory, until now I have posted data like this:
this.save = function(data) {
data["__metadata"] = { "type": getItemTypeForListName('ListName') };
var restQueryUrl = appweburl + "/_api/lists/getByTitle('ListName')/items";
$.ajax({
url: restQueryUrl,
type: "POST",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-Type": "application/json;odata=verbose"
},
data: JSON.stringify(data),
success: function (data) {
console.log(data);
},
error: function (error) {
alert(JSON.stringify(error));
}
});
};
And so far my resource factory looks like this:
myApp.factory('Entry', function($resource) {
return $resource(appweburl + "/_api/lists/getByTitle('ListName')/items", {}, {
get: {
method: 'GET',
headers: { "Accept": "application/json; odata=verbose" },
url: appweburl + "/_api/lists/getByTitle('ListName')/items?$select=Id,Title,Description&$filter=ID eq :ID"
},
query: {
method: 'GET',
headers: { "Accept": "application/json; odata=verbose" },
url: appweburl + "/_api/lists/getByTitle('ListName')/items?$select=Id,Title,Description"
}
})
});
How can I 'convert' my save function to a resource method?
Okey, so I was easier than I thought, what I had to do was run the function 'getItemTypeForListName' before calling the save function, this adds the metadata needed to save to sharepoint. And in my resource factory add this:
save: {
method: 'POST',
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"content-Type": "application/json;odata=verbose"
}
}
And then in my controller call it like this:
$scope.test = new Entry();
$scope.test.Title = 'testTitle';
// function to set metadata
$scope.test["__metadata"] = { "type": getItemTypeForListName('ListName') };
Entry.save($scope.test);

AngularJS Resource Calling Several times

Im building a RESTFul app and using Angular for my view. I want to use resources since is the best approach to it, i follow the how-to's and made some tweaks by my own to include the header api token, the code end like this:
fcbMixApp.factory('Resources', ['$resource',
function ($resource) {
return {
seminary: function (apiToken) {
return $resource('api/seminaries/:seminary', {}, {
save: {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + apiToken
}
},
update: {
method: 'PUT',
headers: {
'Authorization': 'Bearer ' + apiToken
}
}
});
},
attendant: function (apiToken) {
return $resource('api/attendants/:attendant', {}, {
save: {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + apiToken
}
},
update: {
method: 'PUT',
headers: {
'Authorization': 'Bearer ' + apiToken
}
}
});
}
}
}]);
But when i call it on my controller like this:
var Seminary = Resources.seminary(User.getAuthData().access_token);
I dont expect that line to make any request to my api, but it does. My code follows:
Seminary.query(function (data) {
$scope.seminaries = data;
});
So i finally make two calls.
What im doing wrong, or what should i change.
Thanks in advance.
You should set a header with the token:
$http.defaults.headers.common["Authorization"] = 'Bearer' + apiToken;
And not in the resource itself. You should set this when the user is logged in the first time, then you will send it on all requests.
Also consider your resource looking something like this, and making a separate one for attendant:
fcbMixApp.factory('Resources', ['$resource', function ($resource) {
function setRequestData(data) {
var requestData = new Object();
requestData.seminary = data;
return angular.toJson(requestData);
}
return $resource('api/seminaries/:seminary', {}, {
save: {
method: 'POST',
headers: {"Content-Type": "application/json"},
transformRequest: setRequestData
},
update: {
method: 'PUT',
headers: {"Content-Type": "application/json"},
transformRequest: setRequestData
}
});
}]);
Here is the solution for adding your Resource Authorization headers.
AngularJS: How to send auth token with $resource requests?

Resources