How to return data in nested async/await function

I am using the node-vibrant api to retrieve a colour palette, but it seems to return it too late even though I've put async-await into the code.

It is definitely not waiting as the console.log I put in below shows modified->transformed->new data.

I'm not sure what I'm missing or accidentally adding since I've made it confusing the numerous times I've broken the code down.

if(artist == 'picasso'){     transformedData = await transformPage(data, artistObject)  }  

export async function transformPage(pageData: PageData, artist: any){      pageData.components.forEach(async function(component){          if(component == 'header'){              await transformHeader(component.attributes, artist);          }      });        console.log('transformed');        return pageData;  }    function transformHeader(attributesFragment: any,  artist: any) {      generateColourPalette(attributesFragment['container'], artist).then(modified => attributesFragment['container'] = modified);        console.log('modified');                return attributesFragment;  }    async function generateColourPalette(container: any,  artist: any) {      const albumCover = artist['image']['url'];            const v = new Vibrant(albumCover);      const palette = (await v.getPalette()).Vibrant?.hex;      container['backgroundColour']= palette;        console.log('new container');             return container;  }    

https://stackoverflow.com/questions/66557774/how-to-return-data-in-nested-async-await-function March 10, 2021 at 11:06AM