I have a angular service which has custom methods like this
appServices.factory('RuleSets', ['$resource',
function($resource){
return $resource('', {}, {
query: {
method:'GET',
isArray:true,
url: '../data/routing-ruleset-:ruleSetId.json'
},
unschedule: {
method: 'POST',
url: '../data/unschedule:ruleSetId.json'
},
schedule: {
method: 'POST',
params: {ruleSetId: ':ruleSetId', date: ':date'},
url: '../data/schedule.json'
}
});
}]);
I am having issues posting data using my custom methods
RuleSets.unschedule({ruleSetId: ruleSetId});
and
RuleSets.schedule({date: $scope.formattedDate, ruleSetId: $scope.selectedRuleSet})
The behavior i see int he former is that the ruleSetId url parameter does not get populated if it is a POST request. In the latter, I do not know how to populate the request parameters if it is a post request (I am aware the code written is incorrect), as what I have tried in my services function does not work. I would also like to send data as part of the request to 'schedule'. I have seen how I can do this by say doing this
var ruleSets = new RuleSets();
ruleSets.id = $scope.selectedRuleSet
ruleSets.$save();
but how do I do it with a custom method?
Should I rather be using $http or not so many custom methods. I like the structure that custom methods provides, so i'd like to keep it like that if possible.
Related
So I am wondering if it is possible to pass all the form data at once when performing an http request in Angular
My actuall angular http request;
$http({
method: 'post',
url: 'ajax-processor.php',
data: {'ajaxKey':'Mykey', 'angularQuery': 'login', 'username': $scope.username, 'password':$scope.password}
}).then(function successCallback(response) {
// dealing with response here
}
So Is there a way I can pass all the forms field to data. to avoid making all kind of diffrent request and have just one.
Sure,
If you have jQuery available:
$('form').serialize(); // ---> "foo=1&bar=2"
$('form').serializeArray(); // ---> "[ { "foo": 1 }, { "bar": 2} ]"
The first gives you form data, the second gives you an array for use in JSON.
If jQuery isn't available and you're doing HTML5:
var data = new FormData(document.querySelector('form'));
And just pass that to your ajax method.
If you don't have HTML5 or jQuery, you can write the code yourself to serialize the form but it can be tricky, so I recommend some kind of library, such as form-serialize.
If I submit a form using POST, the ASP.NET server can access each value by name. However, if I do it with javascript like:
$http({
method: "POST",
url: TDSV.ROOT_PATH + "/themes/" + data.id,
params: { "xHttpMethodOverride": "PUT" },
data: { "newContent": JSON.stringify({ properties: data.json.properties, "otherInfo": "hello world" }, null, "\t") },
cache: false
});
It is all squashed together into a giant stream that I have to parse through. I have no interest in sending files this way. I just want to separate the strings by name. Is there a way to do this?
It looks like you are using WebForms, if that´s the case you must send the data in a different way.
Here is a tutorial, please take a look and let me know if that helps:
http://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm
I’m submitting a form post using Angularjs (1.2.20) to Microsoft ASP.Net MVC 4:
public ActionResult Save2(FormCollection customer)
{
//TODO: Do some stuffs...
return new HttpStatusCodeResult(HttpStatusCode.OK);
}
However, the FormCollection is empty. I know that the data is being sent because if I change it to the following code below (using strongly type CustomerVm), it works as expected.
public ActionResult Save1(CustomerVm customer)
{
//TODO: Do some stuffs...
return new HttpStatusCodeResult(HttpStatusCode.OK);
}
I’m using FormCollection so that I can add ASP.Net anti-forgery token in the data (instead of headers). Below is my custom javascript code. Also you can find the entire code (Visual Studio) here
You need to send the request with a content-type of application/x-www-form-urlencoded and encode the request body as such. This is a good start but it's sending the data as JSON.
var data = JSON.stringify(customer);
// FormCollection
$http({
method: 'POST',
url: '/Home/Save2',
//dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset-UTF-8',
//contentType: 'application/json; charset-UTF-8',
data: data
});
Turning the object into a URL encoded form is actually pretty complex. Thankfully, Ben Nadel has already created a transformRequestAsFormPost service to do this via a request transformer. You can give it a try by adding in his code and making this change to yours...
myApp.factory('customerSvc', function ($http, transformRequestAsFormPost) {
return {
// ...
save2: function (customer, antiForgeryToken) {
$http({
method: 'POST',
url: '/Home/Save2',
transformRequest: transformRequestAsFormPost,
data: data
});
}
};
});
I am working on a school project and have run into trouble. Namely, I am building a simple AngularJS app which shows some kind of a radio chart based on Last.FM's data.
However, when trying to access the API, I never get a response.
This is the code that I use for accessing:
APIservice.getChartTracks = function () {
return $http({
method: 'JSONP',
url: 'http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=MY_API_KEY&format=json'
});
}
Afterwards, when I do something like this:
APIservice.getChartTracks().success(function (response) {
$scope.tracks = response.tracks.track;
});
the success() method never gets called. If I were to change the url to this one (found it on some online tutorial), I get a response and everything.
How should I go about accessing Last.FM's API?
Thanks in advance.
With $http, the method to use is GET, not JSONP. Write:
return $http({
method: 'GET',
url: 'http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=MY_API_KEY&format=json'
});
Or use the shortcut:
return $http.get('http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=MY_API_KEY&format=json');
Currently I have a resource like so:
return $resource(usersUrl, {}, {
//The data model is loaded via a GET request to the app
query: {method: 'GET', params: {}, isArray: false},
putupdate: {method: 'PUT', params:{}}
});
Now I would like to put some JSON that looks like:
{"providerid":"userpass","firstname":"t","lastname":"b","fullname":"t b","email":"emailaddress,"avatarurl":"http:/.....","passwordset":true}
Anyway as you can see it doesn't have a top level name, if I pass this information in as a parameter to the resource a name is appended to the json like:
myparam:{"providerid":"userpass","firstname":"t","lastname":"b","fullname":"t b","email":"emailaddress,"avatarurl":"http:/.....","passwordset":true}
Is there a away of preventing this from happening as the server side doesn't like it?
Thanks
Tom
From your question it sounds like you are trying to use $resource to post some arbitrary json data. If this data is not a Resource() you should simply use $http.
$http.put(theUrl, theJsonData);
If it is actually a Resource() you can just call the method you declared when building your resource.
myResource.putupdate();