Question

I’ve used the webOS Ares tool to create a relatively simple App. It displays an image and underneath the image are two labels. One is static, and the other label should be updated with new information by tapping the image.

When I tap the image, I wish to obtain a JSON object via a URL (http://jonathanstark.com/card/api/latest). The typcial JSON that is returned looks like this:

{"balance":{"amount":"0","amount_formatted":"$0.00","balance_id":"28087","created_at":"2011-08-09T12:17:02-0700","message":"My balance is $0.00 as of Aug 9th at 3:17pm EDT (America\/New_York)"}}

I want to parse the JSON’s “amount_formatted” field and assign the result to the dynamic label (called cardBalance in main-chrome.js). I know that the JSON should return a single object, per the API.

If that goes well, I will create an additional label and convert/assign the “created_at” field to an additional label, but I want to walk before I run.

I’m having some trouble using AJAX to get the JSON, parse the JSON, and assign a string to one of the labels.

After I get this working, I plan to see if I can load this result on the application’s load instead of first requiring the user to tap.

So far, this is my code in the main-assistant.js file. jCard is the image.
Code:

function MainAssistant(argFromPusher) {}

MainAssistant.prototype = {
    setup: function() {
        Ares.setupSceneAssistant(this);
    },
    cleanup: function() {
        Ares.cleanupSceneAssistant(this);
    },
    giveCoffeeTap: function(inSender, event) {
        window.location = "http://jonathanstark.com/card/#give-a-coffee";
    },
    jcardImageTap: function(inSender, event) {
        //get "amount_formatted" in JSON from http://jonathanstark.com/card/api/latest
        //and assign it to the "updatedBalance" label.
        // I need to use Ajax.Request here.
        Mojo.Log.info("Requesting latest card balance from Jonathan's Card");
        var balanceRequest = new Ajax.Request("http://jonathanstark.com/card/api/latest", {
            method: 'get',
            evalJSON: 'false',
            onSuccess: this.balanceRequestSuccess.bind(this),
            onFailure: this.balanceRequestFailure.bind(this)
        });
        //After I can get the balance working, also get "created_at", parse it, and reformat it in the local time prefs.
    },
    //Test
    balanceRequestSuccess: function(balanceResponse) {
        //Chrome says that the page is returning X-JSON.
    balanceJSON = balanceResponse.headerJSON;
        var balanceAmtFromWeb = balanceJSON.getElementsByTagName("amount_formatted");
        Mojo.Log.info(balanceAmtFromWeb[0]);
        //The label I wish to update is named "updatedBalance" in main-chrome.js
        updatedBalance.label = balanceAmtFromWeb[0];
    },
    balanceRequestFailure: function(balanceResponse) {
        Mojo.Log.info("Failed to get the card balance:  " + balanceResponse.getAllHeaders());
        Mojo.Log.info(balanceResponse.responseText);
        Mojo.Controller.errorDialog("Failed to load the latest card balance.");
    },
    //End test
    btnGiveCoffeeTap: function(inSender, event) {
        window.location = "http://jonathanstark.com/card/#give-a-coffee";
    }
};

Here is a screenshot of the application running in the Chrome browser:

In the browser, I get some additional errors that weren’t present in the Ares log viewer:

XMLHttpRequest cannot load http://jonathanstark.com/card/api/latest. Origin https://ares.palm.com is not allowed by Access-Control-Allow-Origin.

and

Refused to get unsafe header "X-JSON"

Any assistance is appreciated.

Answer 1

Ajax is the right tool for the job. Since webOS comes packaged with the Prototype library, try using it’s Ajax.Request function to do the job. To see some examples of it, you can check out the source code to a webOS app I wrote, Plogger, that accesses Blogger on webOS using Ajax calls. In particular, the source for my post-list-assistant is probably the cleanest to look at to get the idea.

Ajax is pretty much the way you want to get data, even if it sometimes feels like overkill, since it’s one of the few ways you can get asynchronous behavior in JavaScript. Otherwise you’d end up with code that hangs the interface while waiting on a response from a server (JavaScript is single threaded).