Not receiving data from JSON source

Question

I'm attempting to make a Pebble app that reads data from a JSON URL.

However, no matter what I do I can't seem to make the data appear on the app.

When entering this code in:

console.log(data.contents.AvailableBal);
console.log(data.contents.CurrentBal);

I would expect to get a result back in the logs that would help but I only get:

[PHONE] pebble-app.js:?: None
[PHONE] pebble-app.js:?: None

And when viewing the app in the emulator, both values where the data should be, say "Undefined".

My code is as follows. Any help would be great!

var UI = require('ui');
var ajax = require('ajax');

var splashCard = new UI.Card({
  title: "Please Wait",
  body: "Downloading..."
});
splashCard.show();

ajax(
  {
  url: 'https://djkhaled.xyz/balance.json',
  type: 'json'
  },
function(data) {
  console.log(data.contents.AvailableBal);
  console.log(data.contents.CurrentBal);
var main = new UI.Card({
    title: 'Balances',
    body: 'Available Balance: ' + data.contents.AvailableBal +
'\nCurrent Balance: ' + data.contents.CurrentBal
});
  splashCard.hide();
  main.show();
  }
);

Answer 1

This is your JSON,

{
    "contents": [{
        "AvailableBal": "$0.00 CR",
        "CurrentBal": "$0.00 CR"
    }]
}

You can not directly access data.contents.AvailableBal because AvailableBal is not directly inside contents. contents has an array and this array's first object (object at index 0) contains the object that has AvailableBal and CurrentBal keys.

I'm not a JavaScript developer but probably answer would be something like this,

var main = new UI.Card({
    title: 'Balances',
    body: 'Available Balance: ' + data.contents[0].AvailableBal +
'\nCurrent Balance: ' + data.contents[0].CurrentBal
});