getJSON within getJSON - php

Question

I have had a search but not finding anything that is helping me solve my little issue. It would be nice if I was throwing some kind of error but the following code executes partially perfectly.
In essense, I have a list of train departure at a station (returned in JSON format by a custom API departures.php), but as I am looping through this returned array, I want to call a second custom API which brings up details of the service (based on a variable pulled from the first API which is the unique identifier) using service.php.
Here is an example of the service unique ID
Y5G8DkxFcxw7+xmbbBNM1g==
However the second getJSON returns nothing at all.. its as though it doesn't exist.. though the php API functionality perfectly if used on its own
Here is the code, any pointers greatly appreciated. PLease note I have stripped out a lot of the HTML that generates the view from departure.php returned data and just left the bare basics in.
NOTE : this is purely an experiment, and not a commercial product.
var $crs = GetURLParameter('crs');
$.getJSON('departures.php?crs='+$crs, function (data) {
var headertemplate = '<div class="col-md-6"><h2>Departure from ' + data.GetStationBoardResult.locationName + '</h2></div>';
var date = new Date(data.GetStationBoardResult.generatedAt);
var dateString = date.getFullYear() + '-' + ("0" + (date.getMonth() + 1)).substr(-2) + '-' + ("0" + date.getDate()).substr(-2);
var timeString = ("0" + date.getHours()).substr(-2) + ':' + ("0" + date.getMinutes()).substr(-2);
headertemplate += '<div class="col-md-6 text-right"><h2>Last updated: ' + timeString + ' </h2></div>';
$("#headerArea").html(headertemplate);
var template = '<table class="table">';
template += '<tbody>';
for (var i in data.GetStationBoardResult.trainServices.service) {
template += '<tr>';
template += '<td colspan="4">Calling at ';
$service = data.GetStationBoardResult.trainServices.service[i].serviceID;
$.getJSON('servicedetails.php?service='+$service, function (data2) {
for (var j in data2.GetServiceDetailsResult.subsequentCallingPoints.callingPointList.callingPoint) {
template += data2.GetServiceDetailsResult.subsequentCallingPoints.callingPointList.callingPoint[j].locationName;
template += ', ';
}
});
template += '</tr>';
}
template += '</tbody>';
template += '</table>';
$("#dataArea").html(template);
});
Just to follow this through, the URL sends a three letter string which is used to pull off the station departure which is an array.
The script generates the station information and returns into the div with id header.
The script then loops through all the departures, building up the template which it then injects into the div with id dataArea.
In each departure, the script pulls off the details of each service to list where the train will be calling at - THIS is the bit that is totally ignored.