WixData.Query Loop

Hi! Wanted to know how to do a WixData.Query more efficient by using loop… the posts I’ve search haven’t being usefull to me. The code is for obtaining the sum cost of a configuration base in other items from the database.

function datosProducto (i){
wixData.query( “Productos-Chile” )
.eq( “producto” , $w( “#producto” +i).value)
.limit( 500 )
.find()
.then(results => {
let items = results.items;
datos.productoi = items[ 0 ];
datos.productoi.costo_unit= 0 ;
if (datos.productoi.componente1 !== “” ) {

                    wixData.query( "Productos-Chile" ) 
                    .eq( "producto" , datos.productoi.componente1) 
                    .limit( 500 ) 
                    .find() 
                    .then(resultados => { 

let componentes = resultados.items;
let dataComponente1 = componentes[ 0 ];
console.log( "Costo componente1 encontrado: " +dataComponente1.costo_unit);
datos.productoi.costo_unit = parseFloat(dataComponente1.costo_unit.substr( 2 ))*datos.productoi.cantComp1;
$w( “#costo” +i).value = datos.productoi.costo_unit;
console.log( “Costo unitario 1 de producto” +i+ ": " +datos.productoi.costo_unit);
});
}
if (datos.productoi.componente2 !== “” ) {
wixData.query( “Productos-Chile” )
.eq( “producto” , datos.productoi.componente2)
.limit( 500 )
.find()
.then(resultados => {
let componentes = resultados.items;
let dataComponente2 = componentes[ 0 ];
console.log( "Costo componente2 encontrado: " +dataComponente2.costo_unit);
datos.productoi.costo_unit += parseFloat(dataComponente2.costo_unit.substr( 2 ))*datos.productoi.cantComp2;
$w( “#costo” +i).value = datos.productoi.costo_unit;
console.log( “Costo unitario 2 de producto” +i+ ": " +datos.productoi.costo_unit);
});
}
if (datos.productoi.componente3 !== “” ) {
wixData.query( “Productos-Chile” )
.eq( “producto” , datos.productoi.componente2)
.limit( 500 )
.find()
.then(resultados => {
let componentes = resultados.items;
let dataComponente3 = componentes[ 0 ];
console.log( "Costo componente3 encontrado: " +dataComponente3.costo_unit);
datos.productoi.costo_unit += parseFloat(dataComponente3.costo_unit.substr( 2 ))*datos.productoi.cantComp3;
$w( “#costo” +i).value = datos.productoi.costo_unit;
console.log( “Costo unitario 3 de producto” +i+ ": " +datos.productoi.costo_unit);
});
}
});
}

It’d be much easier to review if instead of nesting promises, you’d chain them.
Meaning - instead of:

query1.find()
.then(r => {
    query2.find()
    .then(r =>{
        query3.find()
        })
    })
})

You’ll do:

query1.find()
.then(r => {
 return query2.find();
})
.then(r => {
return query3.find();
})
///etc...

Thanks!