Nested promoses, not waiting for the result

Question

I have a getProgrammeWrapper method that returns a promise. However in .then method i have few other promises that i will like to execute before returning the programmeWrapper[]

This is service.ts

I am calling the service in ngOnInit

this.service.getProgrammesByWrapper().then(((res) => {
            this.programmes = res;
            this.result.updateInfo("Sorting classes...")
            this.programmes =this.programmes.sort((a,b) => {
                return b.programme.click - a.programme.click;
            });
            this.result.updateSuccess(true);
        }));

I hope i have explained the issue clearly. I have tried using await, but it doesn't work as expected.

getProgrammeWrapper()

getProgrammesByWrapper(): Promise<ProgrammeWrapper[]> {
        var current = this;
        var programmesDTO = new Array<ProgrammeWrapper>();
        var table = this.client.getTable("programme");
        return new Promise((resolve, reject) => {
            table.read()
                .then(function (modules) {
                    modules.forEach(element => {
                        var newProgDTO = new ProgrammeWrapper(element);
                        current.getLessonsByProgrammeId(element.id).then(lessons => newProgDTO.lesson = lessons).catch(err => console.log(err));
                        current.getUser(element.tutorId).then(user => newProgDTO.tutor = user).catch(err => console.log(err));
                        programmesDTO.push(newProgDTO)
                    });
                    resolve(programmesDTO)
                }, function (error) { reject(error) });
        });
    }

Answer 1

I'm not sure it would work, could have bugs too. Try this:

getProgrammesByWrapper(): Promise<ProgrammeWrapper[]> {
    var current = this;
    var programmesDTO = new Array<ProgrammeWrapper>();
    var table = this.client.getTable("programme");

    return new Promise((resolve, reject) => {
        table.read()
        .then(function (modules) {
            let promises = new Array<Promise<any>>();

            modules.forEach(element => {
                var newProgDTO = new ProgrammeWrapper(element);

                let promise = current.getLessonsByProgrammeId(element.id)
                .then(lessons => newProgDTO.lesson = lessons)
                .catch(err => console.log(err));

                promises.push(promise);

                promise = current.getUser(element.tutorId)
                .then(user => newProgDTO.tutor = user)
                .catch(err => console.log(err));

                promises.push(promise);
                programmesDTO.push(newProgDTO)
            });

            // Wait for all promises to be ready before resolving
            Promise.all(promises).then(function() {
                resolve(programmesDTO);
            });
        }, function (error) { reject(error); });
    });
}