Item in function not pushing to array

I have a piece of code in an app that I am having difficulty pushing items to an empty array. At the beginning of this section, I created some empty array variables.

var sumPOP = ;
var sumRACE = ;
var sumLANG = ;
var sumINCOME = ;


I am going to then iterate through some selected data, so I have a for loop. Within this loop, I am making a call to an api (I know, it's GIS. That's irrelevant. Just pretend it's an ajax call) to retrieve some data. I am able to console.log() the data and it shows up correctly. I then want to push that data (each item in the loop) to the before mentioned empty arrays. Then to test that the array has been populated, I console.log() the array, both within the loop and outside it. My problem is that nothing shows when I console.log the array. Why is the data not getting pushed outside the array? Note: console.log(sumPOP) run within the call function(esriRequest) does show the items pushed to the array:

for

console.log()

console.log()

console.log

for (var i=0;i<results.features.length;i++){
...
esriRequest({
url:"https://api.census.gov/data/2016/acs/acs5",
content:{
get: 'NAME,B01003_001E,B02001_001E,B06007_001E,B06010_001E',
for: `tract:${ACS_TRCT}`,
in: [`state:${ACS_ST}`,`county:${ACS_CNTY}`]
},
handleAs:'json',
timeout:15000
}).then(function(resp){
result = resp[1];
POP = result[1];
console.log(POP);
sumPOP.push(POP);
RACE = result[2];
LANG = result[3];
INCOME = result[4];
console.log('POP: ' + POP + ', RACE: ' + RACE + ', LANG: '+ LANG + ', INCOME: ' + INCOME);
}, function(error){
alert("Data failed" + error.message);
});
console.log('POP: ' + sumPOP);
...
}
console.log('POP: ' + sumPOP);


Additional information: My eventual goal is to get the final array after the selected data has been iterated through and summarize it; or rather, add it together. My expected array results would be sumPOP = [143, 0, 29, 546, 99];
I want apply a function (also outside the loop) to do this:

sumPOP = [143, 0, 29, 546, 99];

newSum = function(category) {
let nAn = n => isNaN(n) ? 0 : n; //control for nonNumbers
return category.reduce((a, b) => nAn(a) + nAn(b))
};


...and then run popTotal = newSum(sumPOP); to get the total.

popTotal = newSum(sumPOP);

1 Answer
1

I believe your data is being pushed, it just appears that it isn't due to the placement of your console.log()'s

console.log()

Since you are dealing with an async api call, the only place where you are guaranteed to have data is inside your .then() function. Essentially, as you debug, if you add breakpoints, at all your console.log's, you will notice that it hits the ones outside the .then() first and the ones inside the .then() last. Because of that ordering, it will appear that your arrays did not get data pushed to them.

.then()

console.log

.then()

.then()

I added some comments to your example code below to illustrate where you should expect to see data.

EDIT: also I made a small adjustment so all the arrays would get populated

EDIT 2: modified the code so it handles multiple async promises in a "synchronous" manner

var sumPOP = ;
var sumRACE = ;
var sumLANG = ;
var sumINCOME = ;
var myPromises = ; // added this new array for promise.all

for (var i = 0; i < results.features.length; i++) {
var myPromise = esriRequest({
url: "https://api.census.gov/data/2016/acs/acs5",
content: {
get: 'NAME,B01003_001E,B02001_001E,B06007_001E,B06010_001E',
for: `tract:${ACS_TRCT}`,
in: [`state:${ACS_ST}`, `county:${ACS_CNTY}`]
},
handleAs: 'json',
timeout: 15000
});
myPromises.push(myPromise);

// because you are making an async request, at this point, sumPOP may be empty
console.log('POP: ' + sumPOP);
}

Promise.all(myPromises).then(function(resp) {
result = resp[1];
POP = result[1];
console.log(POP); // this will show POP with data


RACE = result[2];
LANG = result[3];
INCOME = result[4];

sumPOP.push(POP);
sumRACE.push(RACE); // added this to populate array
sumLANG.push(LANG); // added this to populate array
sumINCOME.push(INCOME); // added this to populate array

// at this point, all your arrays should have data
console.log('POP: ' + POP + ', RACE: ' + RACE + ', LANG: ' + LANG + ', INCOME: ' + INCOME);

// now that this you have all values, you can call your outside function
this.handleData();
}, function(error) {
alert("Data failed" + error.message);
});

// because you are making an async request, at this point, sumPOP may be empty
console.log('POP: ' + sumPOP);

var handleData = function() {
// do something with the completed data
}

Promise.all

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.