New Promise Data is Undefined after Data Transformation

So I have to do a data transformation between the dbObject and what the UI is expecting. I decided to just translate it into the correct object types and create a new promise with an array of the correct datatype and pass it on.

For some reason when it gets to the UI layer though, the promise is fine but it gives me an undefined error on the content.

Here's the method that reads the first promise, translate the objects and creates the new promise containing the array of new objects.

public async GetAllDebugEvents(): Promise<DebugEventObject[]> {
        let debugEvents: DebugEventObject[] = [];
        if (this.properties.debugMode){
            await this.data.GetAllDebugEvents().then((items: any[]) =>{
                items.forEach((item: any) => {
                    debugEvents.push(this.TranslateDBObjectToDebugEventObject(item, new DebugEventObject()));
                });

                let p = new Promise<DebugEventObject[]>((resolve) => { resolve(debugEvents);});

                return p;
            });
        }
        else {
            return null;
        }
    }

Here is the method that then utilizes that new promise:

private renderDebug(): void {
    let debugHtml: string = '';
    debugHtml += `<div id="debugContainer" class="${styles.debugContainer}">`;
    this.logic.GetAllDebugEvents().then((events: DebugEventObject[]) =>{
        events.forEach((e: DebugEventObject) => {  
          debugHtml +=`<div class="${styles.row}"><div class="${styles.columnFull}">[${e.MessageDate}] - ${e.ErrorMessage.ErrorMessage}  [${e.ErrorMessage.StackTrace}]</div></div>`
        });
        debugHtml += `</div>`;    
    }).then(()=>{ 
      JQ("#WebPartBase").append(debugHtml);
    });
  }

Now I'm getting an events is undefined error when the then is executed. Now the debugEvents array has about 48 items in it when the promise is created in the first function, so I know it's not a data issue.

I'm probably just missing something obvious but when you've been staring at it for a while and trying various different solutions and work arounds you can only go so far before you need those other sets of eyes.

On this line:

await this.data.GetAllDebugEvents().then((items: any[]) =>{

You're missing a return statement so your promise never returns the result. Try changing the await to return.

You also don't need this line - you're creating a new promise which immediately resolves, which is pointless because your function already returns a promise. Just return debugEvents instead.

let p = new Promise<DebugEventObject[]>((resolve) => { resolve(debugEvents);});

I would suggest to remove await because you are handling the value in the .then() function and also you are returning a promise from inside another promise but you are not returning the parent promise, that is why it is undefined. I simplified the function code to be more concise to use async await.

    public async GetAllDebugEvents(): Promise<DebugEventObject[]> {
            let debugEvents: DebugEventObject[] = [];
            if (this.properties.debugMode){
                const items = await this.data.GetAllDebugEvents();
                items.forEach((item: any) => {
                     debugEvents.push(this.TranslateDBObjectToDebugEventObject(item, new DebugEventObject()));  
                    });
                   return debugEvents;
            }
            else {
                return null;
            }
        }