add rows to grid component at run-time via javascript

[Terry Gilliver]

How do I add a row to the grid component at run-time via javascript. This is not a database mapping, the items in the list are coming from a javascript array.

Thanks,

Terry

[Kateryna Grynko]

Hi Terry,

I recommend that you use a Generic service: http://devcenter.appery.io/documentat...

[Terry Gilliver]

Hi, i think i get the idea, i create the service with the required response parameters:
These will be: item, quantity, cost, sub_total. Because these are in an array, I need an array item surrounding them:

I then switched to my page to view mappings:

There appears to be a problem here as the sub_total isn't showing in the response tab.

That apart, I assume I need to add the array to the line:

settings.success({....}) in the javascript. How is an array of data stored in JSON?

[Yurii Orishchuk]

Hi Terry.

Please specify whether these two screen shots(mapping and response tab) from one service?

Also please share your APP with us we need to take a look.

Regards.

[Terry Gilliver]

Yes, the mapping is for the same service. I have not yet written the javascript code for this service, but you are welcome to look at the app:

http://appery.io/app/mobile-frame?src...

eventually the javascript will load the service from the 2-dimensional array (strictly an array of arrays) shoppingBasket[][], which is created and maintained in shoppingbasket.js

The service is called ListOrderService and the Page mapped is: Checkout

Update: It seams that the mapping is working now, I assume that the browser needed updating and that logout/login fixed that problem.

My only remaining question now is how to convert my javascript array into json and pass it to the service.

[Yurii Orishchuk]

Hi Terry.

Yes i see you have manage to fix this issue.

You can convert your JS object to JSON with following code:

pre

var jsArray = [{some: "object", is: "here"}, {some: "object1", is: "here1"}];

//Here is convert processing.
var arrayJSON = JSON.stringify(jsArray);

//Using json string.
console.log(arrayJSON);

/pre

Also: i don't understand why do you need pass JSON to the service. Thus can not help you.

So please describe what exactly you want to implement and we will help.

Thanks & regards.

[Terry Gilliver]

I assumed that to use a rest service the data needed to be sent as JSON.

I am trying to add shopping cart items to a grid component so as to list the items. The data is currently held in a javascript array.
sample array:

shoppingBasket[0] = ["item", "quantity", "cost"];
shoppingBasket[1] = ["sausages", "1", "£5-00"];
shoppingBasket[2] = ["Bacon", "2", "£5-00"];
shoppingBasket[3] = ["minced beef", "1", "£5-00"];

effectively shoppingBasket is an array of arrays.

I need to populate a grid component with the data so that each row is a record from the shoppingBasket array.

each row of the grid component has 4 labels (item, quantity, cost, sub-total).

sub-total will obviously be calculated via cost * quantity. I thought if I could figure out how to use the genric rest service correctly then that would populate my grid component.

[Yurii Orishchuk]

Hi Terry,

Please follow these steps:

1 Create "shopingBasket" REST servie. http://prntscr.com/3wv74b/direct

2 Click "Add Custom implementation". http://prntscr.com/3wv7lj/direct

3 Select "new Javascript" with name "shippingBasket".

4 Fill JS file with following code: http://prntscr.com/3wvc8n/direct

pre

Appery.shippingBasket = Appery.createClass(null, {

Code: Select all

 init : function(requestOptions) { 
     this.__requestOptions = $.extend({}, requestOptions); 
 }, 

 process : function(settings) { 
     settings.beforeSend(settings); 

     var shoppingBasket = []; 
     shoppingBasket[0] = ["item", "quantity", "cost"];  

     shoppingBasket[1] = ["sausages", "1", "?5-00"];  
     shoppingBasket[2] = ["Bacon", "2", "?5-00"];  
     shoppingBasket[3] = ["minced beef", "1", "?5-00"]; 

     settings.success(shoppingBasket); 

     settings.complete('success'); 
 } 

});

/pre

You can use this service after to populate your list.

Regards.

[Terry Gilliver]

My shoppingBasket array now looks like this:

shoppingBasket[0] = ["Item", "Quantity", "Cost", "Sub-Total"];
shoppingBasket[1] = ["Bacon", "2", "£5-00", "£10-00"];
shoppingBasket[2] = ["Sausages", "1", "£5-00", "£5-00"];
shoppingBasket[3] = ... etc.

I have the following service (ListOrderService) defined:

The Checkout page should display the contents of the shopping basket:

These are the mappings from the service to the page are as follows:

The javascript for the service is:

The line displayBasket(); is a function to list details of the shoppingBasket array in the console.

When I test the app the service completes successfully, but the checkout page is not populated.

The URL for the app is:
http://appery.io/app/mobile-frame?src...

To test, run the app and

1. log on as user 'admin', password 'ravine.123'.

2. Click ok on alert box

3. Click Get Dougie

4. Click New Order

5. Click on any of the categories

6. Use '+' on any of the items to add them to the cart

7. The console log will display the contents of the cart each time '+' or '-' is clicked

8. Click checkout

9. The console will again show the contents of the cart as the service is running

10. An alert message shows that the service completed succesfully, however the page is not populated.

[Yurii Orishchuk]

Hi Terry.

You need to use following code:

pre

Code: Select all

     settings.beforeSend(settings); 
     console.log("submitting the following basket"); 
     displayBasket(); 

     console.log("jsonString = " + jsonString); 
     settings.success(JSON.parse(jsonString)); 
     settings.complete("success"); 

/pre

Also see details: http://prntscr.com/3xt8kj/direct

Regards.