Angular Promise returns undefined in another component

Question

this is my carComponent.ts it has following method:

async Download() {
    try {
      const settings = {
        kit: true,
        tyres: true,
        serviced: false,
      };
      const [kits, tyres] = await Promise.all([
        this.checkKits(
          conf,
          "A",
         100,
          false,
          "My kit"
        ),
        this.checktyres(100, 50, false, 'My tyres'),
      ]);
    
    const checkSvg= [...kits.slice(0, 4), ...tyres, ...kits.slice(4)];
   checkSvg.forEach(({ side, svg }) => {
     console.log(svg); // here it returns all the SVG data; works 100%
   return svg;
    });
  }
  catch(e) {
    console.error(e);
  }
   
}

this is viewCarsComponent.ts which is calling above method. But here promise returns undefined so can anyone help please to resolve my issue? I am not sure what am I doing wrong or what I need to do here to resolve.

async DisplaySVG() {
 await this.carComponent.Download().then(data =>{
  console.log(data);
  // here it is undefined... 
 }).catch(error =>{
   console.log(error)
 });

  }

Thank you

Answer 1

You currently have no return statement in Download, so it by default the promise resolves to undefined. If you want to return an array of all the kits and tyres, then simply return checkSvg :

const checkSvg = [...kits.slice(0, 4), ...tyres, ...kits.slice(4)];
return checkSvg;

If each of these have a .svg property, and you only want those, then create a new array with just the .svg properties, and return that:

const checkSvg = [...kits.slice(0, 4), ...tyres, ...kits.slice(4)];
const svgsOnly = checkSvg.map(({ svg }) => svg);
return svgsOnly;