Figured it out myself! One challenging aspect (for me) of learning JavaScript is getting used to asynchronous program flow, as all of the statistical software coding languages that I am used to (Stata, R, SAS, etc.) use synchronous programming. My problem here was that I was not forcing the Leaflet.js map to wait to load until my JSON data from my API endpoint had been called and appended to my geoJSON layer. The solution was to wrap the map setup functions in a big function called mapSetup, and use the jqXHR Object .done method as in the following code:
//jQuery GET request to pull data from SODA and feed to callback function with geoJSON
$.get(url)
.done(function(soda) {
//Output SODA JSON and hra base geoJSOn to external function
symbolize(soda);
})
.done(function() {
mapSetup();
});
//Function to append SODA data to TopoJSON converted to geoJSON
function symbolize(soda) {
//Loop to copy all of SODA JSON properties to HRA base geoJSON
for (var i = 0; i<hraData[0].features.length; i++) {
hraData[0].features[i].properties.estimate = Number(soda[i].estimate);
}
};
function mapSetup() {
//Functions to add geoJSON to leaflet map, add controls, legends, etc.
};