javascript - How to change promises in nested for loops? -

here hot mess of function. grab model variants (which in array strings) csv file (the path of file depends on text grab other csv files, hence looping).

the csvservice.getcsvasarray call see gets object contents of csv file each column stored in array under attribute name of top column. that’s working fine know when see things result["navigationsectionshortnames"], it’s array of strings.

    var index_of_products_section = 1;     var getallmodelvariants = function () {         return csvservice.getcsvasarray("contents/sections/" + navfilenames[index_of_products_section] + "/order.csv").then(function (result) {             var products = [];             (var = 0; < result["navigationsectionshortnames"].length; i++) {                 csvservice.getcsvasarray("contents/sections/" + navfilenames[index_of_products_section] + "/" + result["navigationsectionshortnames"][i]                 + "/order.csv").then(function (productmodelinfo) {                     var productfamilies = []; //array of different families product                     (var j = 0; j < productmodelinfo["navigationsectionshortnames"].length; j++) {                         csvservice.getcsvasarray("contents/sections/" + navfilenames[index_of_products_section].length + "/" + result["navigationsectionshortnames"][i] + "/" + productmodelinfo["navigationsectionshortnames"][j] + "/order.csv").then(function (modelvariants) {                             var productmodels = []; //array of different model types family                             (var k = 0; k < modelvariants.length; k++) {                                 productmodels.push(modelvariants["navigationsections"][k]);                             };                             productfamilies.push(productmodels);                         });                     };                     products.push(productfamilies);                 });              };         })         return products;     }; 

obviously, won't work because time promise resolved, incrementing variable (i, j, or k) has changed. there use promises in nested loops these successfully? have came across $q.all struggling figure out how apply function. looking @ this example uses promises in single loop, , try expand on it.

my desire return 3d array (see plunker @ bottom of question example).

if helps, here simplified version of function static data , no promises:

    var getallmodelvariantstest = function () {         var result = ["productfamily1", "productfamily2", "productfamily3"];         var testarray = ["productfamilymodel1", "productfamilymodelt2", "productfamilymodel3", "productfamilymodel4"];         var testarray3 = ["productfamilymodelvariant1", "productfamilymodelvariant2", "productfamilymodelvariant3", "productfamilymodelvariant4"];             var products = [];             (var = 0; < result.length; i++) {                     var productfamilies = []; //array of different families product                     (var j = 0; j < testarray.length; j++) {                             var productmodels = []; //array of different model types family                             (var k = 0; k < testarray3.length; k++) {                                 productmodels.push(testarray3[k]);                             };                             productfamilies.push(productmodels);                     };                 products.push(productfamilies);             };             return products;     };     var testoutput = getallmodelvariantstest(); 

here in plunker form

if run can see example of kind of output i'm desiring function above.

i'm wondering how can first function promises in nested loops work version in plunker. there way incrementing counter variables , promises?

is $q.all way go?

thank time. let me know if need else or if being unclear.

callback hell or pyramid of doom solution:

function fatchalldataforproduct(product) {    var getproductfamilies = (product) => promise.resolve(["productfamily1", "productfamily2", "productfamily3"]);   var getfamilymodels    = (productfamily) => promise.resolve(["productfamilymodel1", "productfamilymodelt2", "productfamilymodel3", "productfamilymodel4"]);   var getmodelvariants   = (familymodel) => promise.resolve(["productfamilymodelvariant1", "productfamilymodelvariant2", "productfamilymodelvariant3", "productfamilymodelvariant4"]);   var processvariant     = (modelvariant) => modelvariant;   var mapfunarray = ( fun ) => (array) => array.map( fun ); // mapfunarray( e => e )( [1,2,3,4] )    return getproductfamilies(product)     .then( pfs => pfs       .map( pf => getfamilymodels(pf)         .then( fms => fms           .map( fm => getmodelvariants(fm)             .then( mvs => mvs               .map( processvariant )             )           )         )       )     ); }  fatchalldataforproduct('foobarproduct').then(   results => {     console.log(results);   } ); 

getfoos returns promise.
call then on returns promise.
inside then call foos.map(..getbars().then..) returns array of promises.
inside then call bars.map(..getgoos.then..).
goos promises in turn resolve results.

what (* means array):

productpromise:   *familypromise:     *modelspromise:       *processedvariant 

to rid of callback hell problem may use async/await features of ecmascript7, available today transpilers babel.

async function fatchalldataforproduct(product) {    var getproductfamilies = (product) => promise.resolve(["productfamily1", "productfamily2", "productfamily3"]);   var getfamilymodels    = (productfamily) => promise.resolve(["productfamilymodel1", "productfamilymodelt2", "productfamilymodel3", "productfamilymodel4"]);   var getmodelvariants   = (familymodel) => promise.resolve(["productfamilymodelvariant1", "productfamilymodelvariant2", "productfamilymodelvariant3", "productfamilymodelvariant4"]);   var processvariant     = (modelvariant) => modelvariant;    var pfs = await getproductfamilies(product);   var promises = pfs.map( async(pf) => {     var fms = await getfamilymodels(pf)     return fms.map( async(fm) => {       var mvs = await getmodelvariants(fm);       return mvs.map( processvariant )     })   });   return promise.all(promises); }  fatchalldataforproduct('foobar').then(   results => {     for(var promise of results) {       promise.then(...)     }   } );