Playframework forwarding json values to a form - angularjs

I am new to Playframework and AngularJS and developing an application in AngularJS on the front end and Playframework on the back end.
I am facing one scenario: when the user clicks a menu link (Show students), it should show all the students. In the play action, the data is sent as json. Now the problem is if the data is sent as Json, then I don't see the option for which page it should forward to.
Alternatively, I have to use the normal playframework style like forwarding to page with list of values.
//This is the current playframework code I use. Here I set the values to students form
// This is not the way I want
public static Result getAllEmployees(){
List<Student> all = Student.find.all();
JsonNode json = Json.toJson(all);
return ok(views.html.students.render(all));
}
//This is the way I want
public static Result getAllEmployees(){
List<Student> all = Student.find.all();
JsonNode json = Json.toJson(all);
return ok(json); // no option for specifying the page.
}
Is there anyway to do it?

They are both valid approaches to returning data, but the first returns a whole html page, for example in response to a #routes.Employees.getAllEmployees reference in your view. The second one returns just a Json content type response, for example in response to a Javascript request or AngularJS $http.get. The methods need to have different names (they can't both be called getAllEmployees). Both of them will have entries in the routes file. They will be different entries the way you have written them, so perhaps something like:
GET /employee controllers.Employees.getAllEmployees
GET /api/employee controllers.Employees.apiGetAllEmployees
(Disclaimer: I haven't done this in AngularJS yet, but the principle should be similar.)

Related

Swagger - Array of key-value pairs with unknown keys

I am trying to write a Swagger API document but I am having issues with one particular scenario.
I have a huge grid with id references in each (think Chess Board) and I want to send grid references that have changed and the new ID in each. So I may have a 40x40 grid and I change one of the grid squares to a different value.
I want to send to my API :
12x21 = 12345
23x11 = 87654
42x01 = 12987
23x09 = 19283
Without having to list every single grid position in swagger as a parameter, how can I represent this scenario using Swagger UI?
I would design one endpoint where you send the change to as a PUT request (or a POST request if it is a new id, it's hard to tell from the context), with the actual change as the JSON body of your request. The reference to your grid could then either be sent as query parameters or as part of the JSON body.

AngularJS dynamic table - RESTfull data

I have a big data portion that I would like to post in a table. However, the data should be sorted and paginated. I know I am able to pass the whole data to the client at once and then paginate it using angular, but this will be too slow. I prefer to pass the data page-by-page, so one the client want to open a page from a table to load the data for it.
Up until now I have created an API that returns me the data that I need, based on the page number and the number of rows on the page. However, I don't know how to use it with AngularJS.
Can you please help me?
It looks like a backend problem. If you are using a standard restful backend, use the limit/skip parameters, you can encapsulate into a paginate.
Example:
localhost:1337/dataTable?skip=0&limit=100
localhost:1337/dataTable?skip=100&limit=100
localhost:1337/dataTable?skip=200&limit=100
...
On the frontend use a table object like ng-Table, and use the pages to keep track of the offset, the page number and the total items available.
skip = (pagNum - 1 * pageSize)
limit = pageSize
Make your backend return you the page you want plus the available dataNumber so you can build the pages controller.
Documentation for skip/limit on sails
http://sailsjs.org/documentation/reference/waterline-orm/queries/limit
http://sailsjs.org/documentation/reference/waterline-orm/queries/skip
Best approach is to keep track of the limit and offset in your controller. Then when user selects new page (offset) or changes items per page (limit), update the corresponding values and use them to make a new http request.
You could call a function on ng-change of a dropdown and that drop down would contain values of page number and number of records to fetch. Or you can provide two text boxes one for page number other for number of records and keep a button and on its ng-click event that will take value of those text boxes and post to your server and bring back data based on new values in text boxes

AngularJS - How to add child objects during edit and then PUT

I'm getting started with AngularJS with Web API and EF on the back end. I have an edit form that is populated via a GET request which returns a Boat object. One of Boat's properties is an Images array.
If the user adds images to Boat then I need records to be inserted into the database for each new image when the boat is updated. (But obviously not for images that the boat already had prior to edit.)
The current Web API function is:
public async Task<IHttpActionResult> Put(int id, Boat boat)
It seems I could either:
a) Push any newly added images to $scope.Boat.Images prior to the PUT. Then in the Web API function, loop through the received Boat.Images, check if a database record exists for that image, if no record exists add the image record to the database. This seems a bit uneconomical because I'm looping through every existing image and checking if it actually exists in the db already.
or
b) Send a separate object "newImages" with the PUT. Then I guess the Web API function would be:
public async Task<IHttpActionResult> Put(int id, Boat boat, string[] newImages)
This would have the benefit of not having to check which images already exist vs new ones. ie. Everything in newImages gets added to the database. But, is it weird from an AngularJS point of view to separate the new images from the Boat.Images collection?
Would you do a) or b) or... c) some other way?
I'll do A as it fits more the Restful approach.
Now Images could be an Array of complex object instead of Array of string, therefore you would have a property ID.
Then on the WebAPI side, you just add the Images without IDs set.
var newImages = Boat.Images.Select(x => x.Id == null);

ng-repeat convert resource objects to simple objects

Iam getting my data with help of the Angular's $resource service as array. Each element of that array is an Resource-Object. So i can use methods like $save and $update of these Objects. In a view i represent my array with the help of the ng-repeat directive like:
<div ng-repeat="appointment in object.appointments" ng-click="editAppointment(appointment)">
And here i get in trouble. The appointment-Object i get in the editAppointment-Method is a simple Object. No Resource Object anymore. So i cant use the helpfull methods like i mentioned above.
$scope.editAppointment= function(appointment){
console.log(appointment); // > Object
console.log(object.appointments); // > Array of Resource
}
Have somebody noticed that problem too? May its a bug, but i cant imagine that.
Assuming your resource class is called Appointment, you should just be able to do:
$scope.editAppointment= function(appointment){
new Appointment(appointment).save();
}
Presumably your Appointment resource looks something like the following (i.e. it correctly maps some sort of id property from existing objects to the URL parameters):
var Appointment = $resource('/appointment/:appointmentId', {appointmentId:'#id'});
This would be the case if your appointment objects (i.e. the underlying JSON objects handled by your API) have an ID property called id. If it's called something else (or if there are multiple path variables in your URL) you'll just need to change the second argument to map all of the properties of the objects being saved (the values starting with '#') to the URL path variables (the things starting with ':' in your URL).
See where they save a new card in the credit card example here: http://docs.angularjs.org/api/ngResource.$resource. The fact that they're dealing with a totally new object and that you're trying to save an existing one is irrelevant. Angular doesn't know the difference.

Angular ngResource with AppEngine Cursor

I'm using Google AppEngine as backend and AngularJS as front end for web application I'm making. I'm presenting data in pages to the user.
AppEngine has the ability to select data and return 3 pieces of information: the items selected, indication if there are more items and cursor for the next page.
I need to return all 3 pieces to the client app so it can present the fetched items and allow the user to go to the next page.
I also would like to use ngResource to interact with the server.
The problem is that ngResource expect the list of items to be a list and here it is an object with the 3 pieces.
Is there a way to modify ngResource a bit so that after fetching the data it will use the items to build the array of items?
Not necessarily, ngResource can deal with arrays as well as single item or json object. The standard get operation returns a object whereas query returns array. Bottom line as long it is a valid json data ngResource would work.
You can always call get on the resource, get the data into a json object and then it can have sub-properties which can be of array type.
You can share your specific structure and the community can help you with understand how to access it using ngResource

Resources