POST Ajax request by AngularJS to Symfony controller - javascript

I'm trying to do an Ajax request from my angularJs controller to my Symfony controller. However, for an unknown reason, I cannot receive the data in my Symfony controller. My controller gets called and I can return some information that I will see in the success function on the AngularJS side. However, the data I'm sending via AngularJs cannot be retrieved on the Symfony controller.
Here's what I'm doing on the AngularJS side:
$http.post('{{ path('admin_ima_processmanagement_project_save', {'id':object.id}) }}',{"projectJson":"test"}).
success(function(data, status, headers, config) {
console.log("yeah");
console.log(data);
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("oh non");
console.log(data);
});
I can see in my console "yeah" that is appearing after the execution of this request.
In my Symfony controller, I have the following:
$request = $this->container->get('request');
$projectJson = $request->query->get('projectJson');
$response = array("code" => 100, "success" => true, "projectJson" => $projectJson);
return new Response(json_encode($response));
On the console, after the call, I get {"code":100,"success":true,"projectJson":{}} meaning that projectJson is unfortunately empty...
What should I do to retrieve the data that I'm sending from my client ?&

In class Request property query refers to GET parameters.
In your case you need to access to POST parameters, which are in request property.
So your code should look like this:
$projectJson = $request->request->get('projectJson');
More info about Request you will find here.

Symfony2 does not support AngularJS $http data. Because AngularJS sends data as request body, and SF2 reads only $_GET and $_POST.
You have 2 solutions:
Update Php code to handle such data
Update JS code to send classic form data (check https://gist.github.com/bennadel/11212050 for this)

Related

How to return string as a response to http request

In my Maven app I have mapped put http request onto this function(using spring framework), and I want to check something inside it and send response as text. Then I want to send that request from angularjs and store that response into some variable from angularjs controller. This is what I have tried.
#RequestMapping(path="/play", method={RequestMethod.POST}, produces = {MediaType.APPLICATION_JSON_UTF8_VALUE})
public String someFunction(){
//...
return "some text";
}
$scope.getResponse = function(param1, param2...){
$http.post("url..").then(
function(response){
$scope.response = response.data.response;
console.info('success');
},
function(response){
console.info('failure');
})
}
Http is mapped correctly and works from browser, problem is how to store textual response into some angularjs variable from controller.
It seems $http finds it difficult to parse the invalid JSON data in the response.
We have produces = {MediaType.APPLICATION_JSON_UTF8_VALUE} in there for the API and sending out plain text. That's why it goes to the failure handler.
Change the media type to MediaType.TEXT_PLAIN_VALUE and see if it works...

Posting data to JSON - Angular .post

I am working on an application and am having an issue posting to a .JSON file in my assets. I am working with an Angular based application. The error code I get is 404 with a response of: Cannot POST /assets/data/card-stack.json. Now the problem is, when I work with my get to retreive the JSON data it works perfect. It is only when I am using .post. Here is what I am doing:
$http.get('./../../assets/data/card-stack.json').success(function(data) {
$scope.cards = data;
// Set the showdown images from the card data grabbed from the card-stack.json file
$scope.showdowns = [
$scope.cards[0].url,
$scope.cards[1].url,
$scope.cards[2].url,
$scope.cards[3].url
];
});
// Simple POST request example (passing data) :
$http.post('./../../assets/data/card-stack.json', {url : './../images/banana.jpg'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
console.log(data);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Suggestions?
A .json file is a static file that just contains json data so you won't be able to post to it. Instead you would need to use a server side page or service such as php to process the posted data.
Try to set the $http header:
$http.defaults.headers.post["Content-Type"] = "application/json";
Try it.

AngularJS HTTP Call / Response

This is probably something very simple but I am having some problem making an HTTP GET request, getting the data back, and attaching it onto the javascript global window variable.
Simple HTTP Call:
$http.get("production/dashboard?dashboard_type=A").success((data) ->
$scope.pods = data;
window.pods = $scope.pods.to_json;
window.type = 'A';
alert(window.pods)
alert(window.type)
alert "success1"
return
).error (data, status, headers, config) ->
return
Upon execution, I am getting:
1. Alert("undefined")
2. Alert("A")
I thought that the promise of the http request will get resolved when the response returns?
I checked the Network tab and there is indeed JSON data being sent back as the response to the request.
I must be missing something simple...
$http.get("production/dashboard?dashboard_type=A")
.success(function(data) {
$scope.pods = data;
window.pods = $scope.pods;
window.type = 'A';
alert(window.pods);
alert(window.type);
alert("success1");
return
}).error (function(data, status, headers, config){
return;
});
This is assuming it has access to the window where your code is. Is this wrapped in a module and controller?
As we need json data to get from $http.. Trying putting .json like below.
$http.get('/products.json')
Regarding your another issue.. you might get a hint with this link AngularJS : Prevent error $digest already in progress when calling $scope.$apply()

AngularJS wrapping JSON data returned from server

I have a basic CRUD application up and running, however what I am wanting to do is wrap every response from the server with two additonal parameters namely
'error' => boolean, 'errorMessage' => string, 'data' => {whatever data}
so that I can handle when a successful request is sent and returned from the server, however the database was unable to update for some reason so I can not only keep the UI in sync with the DB, but also present the user an error message on a failed update.
As AngularJS expects an updated object the UI will be in sync if I return the same object on failure, but as there would be no notification of failure the user wouldn't realize what the problem is.
Within my old applications pre-Angular (jQuery based) I could easily decode the json data on every response and if error === true present an error message, but in Angular I cannot seem to figure out how to accomplish this.
I may very well be off base here as I am just getting into Angular so any direction would be helpful.
Make this http request from angularjs and send back a response object from server.
response object --->{'error' => boolean, 'errorMessage' => string, 'data' => {whatever data}}
which gets collected in Resdata. use Resdata to take action.
$http({method: 'POST', url:url, data:body}).success(function(Resdata, status, headers, config) {
console.log(Resdata);
if(Resdata.error == true){
// use Resdata.errorMessage
}
else if(Resdata.error == false){
// use Resdata.data
}
}).error(function(Resdata, status, headers, config) {
console.log("error:", error);
});

AngularJS $http.put PUT Method not sending Data

I'm switching from jquery $.ajax, which was working fine, to using AngularJS $http.put to access a restful API.
I can make an API call, but the PUT data isn't getting sent - so my API sees a PUT request with an empty data object, which should contain a JSON string -> data.values = 'a json structure'
$http.put(
$rootScope.api_url,
{
values: jsonifiedValues
},
{
headers: {
apihash: sha256hash
}
}).success(function(data,status,headers,config){
// handle success
}).error(function(data,status,headers,config) {
// handle failure
});
I've not used AngularJS's $http before, but when I dump out the data in my PHP api it's just empty. this is how I'm pulling it from the request in the PHP:
parse_str(file_get_contents('php://input'), $put_vars);
$arr_req_data = $put_vars['values'];
In my API if the apihash sent from the request doesn't match the sha256 hash built on the PUT values, it fails.
This is working in JQuery, just failing now I've switched to $http. I'm not sure why the PUT data seems to be empty.
The return value from file_get_contents('php://input') will be a JSON string (provided everything got sent), so parse_str is not the right function to handle that data.
Instead use json_decode.
Also there is no need to send jsonified values, it will just make things more complicated as you'll have to use json_decode twice.

Categories