Pebble.js not loading menu data from JSON source - pebble-watch

Question

I'm currently messing around with pebble.js (sdk 2.0), and I'm trying to make a menu based app which loads data from a JSON source.
I can get everything working fine, except the populating the menu part. Here is my code :
var UI = require('ui');
var ajax = require('ajax');
var dataJSON = [];
var fruits = [
{
title: "Apple",
subtitle: "Green and crispy!"
},
{
title: "Orange",
subtitle: "Peel first!"
},
{
title: "Melon",
subtitle: "Only three left!"
}
];
var parseFeed = function(data, quantity) {
var items = [];
for(var i = 0; i < quantity; i++) {
var teamOne = data.matches[i].team1.team_tag;
var teamTwo = data.matches[i].team2.team_tag;
var startTime = data.matches[i].starttime;
var title = (teamOne + ' vs ' + teamTwo);
var time = (startTime.substring(11) + " CET" );
items.push({
title:title,
subtitle:time
});
}
return items;
};
var matchMenu = new UI.Menu({
sections: [{
title: 'D2MT',
items: dataJSON
}]
});
ajax({
url:'http://dailydota2.com/match-api',
type:'json'
},
function(data) {
dataJSON = parseFeed(data, data.matches.length);
for(var i = 0; i < fruits.length; i++) {
console.log('title = ' + fruits[i].title);
console.log('subtitle = ' + fruits[i].subtitle);
}
for(var j = 0; j < dataJSON.length; j++) {
console.log('title = ' + dataJSON[j].title);
console.log('subtitle = ' + dataJSON[j].subtitle);
}
console.log('SHOW MENU');
matchMenu.show();
},
function(error) {
console.log('Download failed: ' + error);
}
);
which outputs :
[PHONE] pebble-app.js:?: title = Apple
[PHONE] pebble-app.js:?: subtitle = Green and crispy!
[PHONE] pebble-app.js:?: title = Orange
[PHONE] pebble-app.js:?: subtitle = Peel first!
[PHONE] pebble-app.js:?: title = Melon
[PHONE] pebble-app.js:?: subtitle = Only three left!
[PHONE] pebble-app.js:?: title = Rave vs 5eva
[PHONE] pebble-app.js:?: subtitle = 14:00:00 CET
[PHONE] pebble-app.js:?: title = Arcanys vs XctN
[PHONE] pebble-app.js:?: subtitle = 14:30:00 CET
[PHONE] pebble-app.js:?: title = VP vs Meepwn'd
[PHONE] pebble-app.js:?: subtitle = 17:00:00 CET
[PHONE] pebble-app.js:?: title = Vega vs NiP
[PHONE] pebble-app.js:?: subtitle = 17:00:00 CET
[PHONE] pebble-app.js:?: title = Secret vs Empire
[PHONE] pebble-app.js:?: subtitle = 20:00:00 CET
[PHONE] pebble-app.js:?: title = SumsRift vs HR
[PHONE] pebble-app.js:?: subtitle = 20:00:00 CET
[PHONE] pebble-app.js:?: title = NiP vs Vega
[PHONE] pebble-app.js:?: subtitle = 20:30:00 CET
[PHONE] pebble-app.js:?: title = Fire vs Thu
[PHONE] pebble-app.js:?: subtitle = 23:00:00 CET
[PHONE] pebble-app.js:?: title = Signature vs G Guard
[PHONE] pebble-app.js:?: subtitle = 08:00:00 CET
[PHONE] pebble-app.js:?: title = Aces vs MVP
[PHONE] pebble-app.js:?: subtitle = 11:00:00 CET
[PHONE] pebble-app.js:?: SHOW MENU
[PHONE] pebble-app.js:?: (+) [menu 1] : [menu 1]
The menu loads 'Fruits' fine, but when i load 'dataJSON' it doesn't do anything, anyone one else know whats going on with why it won't load the data into the menu

Answer 1

I failed to realise : var matchMenu = new UI.Menu, created the menu then and there, so when dataJSON was full, the menu was already made, fixed by creating the menu once dataJSON is full.

Answer 2

Like you mentioned in your own answer, you are making the menu right at the first call of var matchMenu = new UI.Menu. The way to fix that is one of two ways.
You can do it how you mentioned and make the menu after retrieving your data but then you are limiting when and how to call that menu. You likely created that menu inside a function that makes it have a lot of overhead to load it again.
You really should be doing it the way you started but then adding the dataJSON to the menu before displaying it. That will allow you the flexibility to have a global addressable menu that you can update as you proceed in your app, instead of each time requiring the server loaded information to be called again.
Also, in my suggested method, you can put in a base menu that can let the user know if that is displayed that we are having trouble loading information.