How to dynamically populate radio button widget in DrupalGap (with InApp Purchase Products)?

Question

I am pulling products from the iTunesConnect using the in-app-purchase cordova plugin and want to show the valid products (title) in a radio button list.

The store.('product')update function renders this (I don't know why they are shown twice?!)

2015-12-27 10:59:12.158 paypal3drupal[1059:18480] 200 - OK
2015-12-27 10:59:12.896 paypal3drupal[1059:18480] product_item:     {"id":"120points","alias":"120  Points","type":"consumable","state":"valid","title":"120 Points","description":"Get 120 points for asking questions","price":"€10,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"120points","alias":"120 Points","type":"consumable","state":"valid","title":"120 Points","description":"Get 120 points for asking questions","price":"€10,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"200points","alias":"200 Points","type":"consumable","state":"valid","title":"Points 200","description":"Get 200 points for everything","price":"€15,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"200points","alias":"200 Points","type":"consumable","state":"valid","title":"Points 200","description":"Get 200 points for everything","price":"€15,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.900 paypal3drupal[1059:18480] \o/ STORE READY \o/

The cordova example renders the product like this

// When any product gets updated, refresh the HTML.
store.when("product").updated(function (p) {
    app.renderIAP(p);
});

and

app.renderIAP = function(p) {
var elId = p.id.split(".").pop();
var el = document.getElementById(elId + '-purchase');
if (!el) return;
if (!p.loaded) {
    el.innerHTML = '<h3>...</h3>';
}
else if (!p.valid) {
    el.innerHTML = '<h3>' + p.alias + ' Invalid</h3>';
}
else if (p.valid) {
    var html = "<h3>" + p.title + "</h3>" + "<p>" + p.description + "</p>";
    if (p.canPurchase) {
        html += "<div class='button' id='buy-" + p.id + "' productId='" + p.id + "' type='button'>" + p.price + "</div>";
    }
    el.innerHTML = html;
    if (p.canPurchase) {
        document.getElementById("buy-" + p.id).onclick = function (event) {
            var pid = this.getAttribute("productId");
            store.order(pid);
        };
    }
}

How can I dynamically target and populate a radio button widget in Drupalgap? More specifically, how can I populate the radio button options and values (option value = product_item_id, option label = product_item.title)?

Based on the form documents example I have a custom page with static values that displays the form with a submit button.

/**
 * Implements hook_menu().
 */

function my_module_menu() {
   try {
var items = {};
items['in-app'] = {
  title: 'get points',
  page_callback: 'drupalgap_get_form',
  page_arguments: ['my_module_payment_form']

};
  return items;
}
catch (error) {
console.log('my_module_menu - ' + error);
}

}

/**
* Define the form.
*/
function my_module_payment_form(form, form_state) {
try {
form.elements['points'] = {
  type: 'radios',
  title: 'Points',
  options: {
    0: 'cancel',  
    70: '70 Points', // should look something like product_item.id[0] : product_item.title[0] 
    120: '120 Points',
    250: '250 Points'
    },
    default_value:0,
    required: true
};
form.elements['submit'] = {
  type: 'submit',
  value: 'Buy points'
};
return form;
}
catch (error) { console.log('my_module_payment_form - ' + error); }
}


/**
 * Define the form's submit function.
*/
function my_module_payment_form_submit(form, form_state) {
   try {
     drupalgap_alert('You selected ' + form_state.values['points'] + '!');
}
  catch (error) { console.log('my_module_payment_form_submit - ' +    error); }
}

Answer 1

Use a pageshow callback:

function my_pageshow() {
  // Retrieve the data from the server
  // During the retrieval's success callback, place the items into the empty radio button widget.
}

You can leave the radio buttons empty in your form builder function, then handle the dynamic population of the radio buttons with the pageshow callback.