0

I am creating an SPFx webpart for SharePoint Online. I use this code. It does write values to the console (all the email addresses of the people in the group) but it doesn't return the 'stringToReturn' value to display in the web part.

My web part displays: Meet the Team... undefined

Am I doing something fundamentally wrong?

Thanks P

public async render(): Promise<void> {

    
      this.domElement.innerHTML = `
      <section>
        <div>
          Meet the Team...
        </div>
        
        <div>
        ${await this.getGroupData()}
        </div>
      </section>`;
    }

protected async getGroupData(): Promise<string>
  {
    let stringToReturn:string;


    try
    {
    this.context.msGraphClientFactory.getClient('3')
    .then((client: MSGraphClientV3): void => {
      client.api('groups/<GUID>/members')
      .get((error: any, response: any, rawResponse?: any) => {

          const members: MicrosoftGraph.User[] = response.value;

          for (const memberDetail of members){
            console.log('memberDetail.mail:' + memberDetail.mail);
            stringToReturn = memberDetail.mail + "<br>";
          }

        });
    });

    }catch(e){
      
      stringToReturn = e.message.toString();

    }
Pete Whelan
  • 85
  • 11

1 Answers1

1

You are not returning the Promise.

Either you go with the async await style

    var client = await this.context.msGraphClientFactory.getClient('3');
    var result = await client.api(...).get();
    //do something with the result here
    return stringToReturn;

Or you can do something like

return new Promise((resolve) => {
    this.context.msGraphClientFactory.getClient('3')
    .then((client: MSGraphClientV3): void => {
      client.api('groups/<GUID>/members')
      .get((error: any, response: any, rawResponse?: any) => {

          const members: MicrosoftGraph.User[] = response.value;

          for (const memberDetail of members){
            console.log('memberDetail.mail:' + memberDetail.mail);
            stringToReturn = memberDetail.mail + "<br>";
          }
          //when your string is ready return by resolving it
          resolve(stringToReturn);
        });
    });
 });
devil_inside
  • 412
  • 3
  • 9
  • thanks for that. If I try the first way I am unsure what to put in the //do something with the result. I try result.value.forEach(user => console.log(user)); but it gives an error about user having an 'any' type. Sorry Im not great at this! – Pete Whelan Sep 08 '22 at 09:06
  • I answered in your other topic. You can do exactly the same there what you already got in your code. Starting with "const members: MicrosoftGraph.User[] = result.value; for (const memberDetail of members){...}" – devil_inside Sep 08 '22 at 12:10
  • Do you know is there a good way to shuffle the results that come back from the API? – Pete Whelan Sep 08 '22 at 12:12
  • I am not sure what you mean by shuffle? Randomly get a new order? Then maybe this here might help https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array – devil_inside Sep 08 '22 at 12:15