nested fetch api react native giving unpredictable response for custom operation - react-native

Question

hi i am trying to fill array with custom data using multiple apis in react native but unable to do so as nested fetch api giving unpredicatable result my final array is always empty .
Any help would be appreciated
Thanks in advance
below is my code please tell what i am doing wrong here..
fetchSubcategories(category_id){
var url=GLOBAL.BASE_URL+'/categories?filter[where][categoryId]='+GLOBAL.CATEGORY_ID+'&filter[where][category_type]=subcategory&filter[order]=name ASC';
const set = [];
const subcategoriesArray=[];
fetch(url)
.then((response) => response.json())
.then((responseData) => {
for (var i = 0; i < responseData.length; i++) {
set.push(responseData[i]);
}
console.log('response subcategories : '+JSON.stringify(set,null,2));
})
.then(()=>{
for(var j=0;j<set.length;j++){
var name=set[j].name;
var id=set[j].id;
fetch(url)
.then((response) => response.json())
.then((responseData) => {
var subcategory={
name:name,
id:id,
products:[]
}
subcategoriesArray.push(subcategory);
}).done()
}
})
.done()
console.log('final custom josn array : '+JSON.stringify(subcategoriesArray,null,2));
}
Note : urls used above giving the proper result on my end the only thing is final subcategoriesArray should be filled.

Answer 1

fetch is "asynchronous", so your console.log is probably running before the request has actually finished, but the array is actually being populated.
To test: try moving your console.log to just after subcategoriesArray.push(subcategory);
You should see it log out the array for each set, but at least you can see it is actually being populated.
You could wrap the function in a Promise so you can get the array after it has been async populated:
fetchSubcategories(category_id){
return new Promise((resolve, reject) => { // <- add this
var url=GLOBAL.BASE_URL+'/categories?filter[where][categoryId]='+GLOBAL.CATEGORY_ID+'&filter[where][category_type]=subcategory&filter[order]=name ASC';
const set = [];
const subcategoriesArray=[];
fetch(url)
.then((response) => response.json())
.then((responseData) => {
for (var i = 0; i < responseData.length; i++) {
set.push(responseData[i]);
}
console.log('response subcategories : '+JSON.stringify(set,null,2));
})
.then(()=>{
for(var j=0;j<set.length;j++){
var name=set[j].name;
var id=set[j].id;
fetch(url)
.then((response) => response.json())
.then((responseData) => {
var subcategory={
name:name,
id:id,
products:[]
}
subcategoriesArray.push(subcategory);
if(j == set.length-1) { // <- add this block
resolve(subcategoriesArray);
}
}).done();
}
}).done()
}); // <- completes promise block
}
You can then use it like this:
fetchSubcategories(category_id).then((subCatArray) => {
console.log('final custom join array', subCatArray);
});
Hope this helps! :)