CODEWITHSUNDEEP
javascriptasynchronouspromise
Joaquim
Joaquim

Reputation: 406

Promise implementation problem, asynchrony not working properly

I'm implementing a web-app and I need to code some steps in an asynchronous way. On one of these steps I'm calling an API to extract a list of ids from a 3D model, then, I need to use this as a Promise in order to do some more operation with these extracted ids.

I'm getting troubles trying to implement the asynchrony, the ids are not received properly in the second function.

I have tried to implement Promises and callbacks, with no success.

javascript

//Create bimIdsList Promise in order to create a list with all BIM360 
//elements in the model      
    function bimIdsList() {
        self.viewer.model.getBulkProperties(ids, properties, (propResults) => {
            propResults.forEach((propResult) => {
                propResult.properties.forEach((property) => { 
                    if(property.displayCategory === 'BIM 360'){
                        self._bimIds.push(propResult.dbId);
                    }                     
                })
            })  
        });
        /*if(self._bimIds) {
            resolve();
        }*/                         

        return Promise.resolve(self._bimids);

    }

//Create fillEquipList function in order to fill equipment list after 
//generating bimIdsList 
    function fillEquipList(bimIds) {
        self.viewer.model.getBulkProperties(bimIds, ['Type'], (propResults) => {
            propResults.forEach((propResult) => {
                propResult.properties.forEach((property) => {
                    if(property.displayCategory === 'BIM 360') {
                        var foundEqIndex = self._equipList.findIndex(x => x == property.displayValue);
                        if(foundEqIndex >= 0) {         
                            //Already in List, do Nothing                                    
                        } else {
                            self._equipList.push(property.displayValue)                                      
                            self._addedEquipment = true;                                                                    
                            //Add to dropdown 
                            const optionElement = document.createElement('option');
                            optionElement.value = property.displayValue;
                            optionElement.innerText = property.displayValue;
                            self._selEquipmentType.append(optionElement);  

                        } 
                    }
                })
            })                                                       



        });             
        //Resolve after callback 
        return Promise.resolve(self._addedEquipment); 

    }  


    //Now execute both functions
    bimIdsList()
        .then(success => {
            console.log('bimIds length: ');
            console.log( JSON.parse(JSON.stringify(success)) )                
            return fillEquipList(success)
        })
        .then(success => this.fillDictionaries());


    console.log(this._bimIds);

I would like to execute the second function (fillEquipList) with the appropiate given parameter coming from the initial Promise (bimIds)

Upvotes: 0

Views: 59

Answers (1)

Quentin
Quentin

Reputation: 943108

return Promise.resolve(self._bimids);

You are creating a resolved promise … but you are doing as soon as the async function (self.viewer.model.getBulkProperties is triggered).

You need to create a promise that is returned immediately but doesn't resolve until you actually have the data:

return new Promise( function (resolve) {
    // self.viewer.model.getBulkProperties goes here
        // resolve(data) goes *inside the callback*
})

Upvotes: 2

Related Questions