0

I'm new to typescript and spfx SharePoint online webpart development. I've got a requirement where I need to run a REST api and wait for its result before I run the next one. I am kind of lost. I'm wondering if anyone can point me in the right direction to do this right. I basically want to run getLibraryIcons first and get all results before I run the other getLibraries. I want to use the results from library icons with the results I get from getLibraries. Thank you!

some of the related code I have in my webpart

export interface SPLibraryList
{
  value: SPLibraryItem[];
}

export interface SPLibraryItem {
  Title: string;  
  Description: string;
  DocumentTemplateUrl:string;
}

export interface SPIconList
{
  value: SPIconItem[];
}

export interface SPIconItem {
  Title: string;  
  Url: string;  
}

and then

public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.siteLibraries }">
        <div id="spLibrariesList"></div>
        
      </div>`;
      this.renderLibraries();
    /*let tileInfo = this.getIcons();*/

    
    
  }

 protected renderLibraries(): void {
    let listItemInfo: string = "";  
    const libraryImage: any = require('./assets/DocLibIcon.png');

    let icons = this.getLibraryIcons()
    let libraries = this.getLibraries();
   /* this is where I want to go through each array of objects and do some logic*/
 }

protected getLibraries(): Promise<SPLibraryList> {
    let currentWebUrl = this.context.pageContext.web.absoluteUrl;
    let requestUrl = currentWebUrl.concat("/_api/web/lists?$filter=(BaseTemplate eq 101) and (Title ne 'Site Assets') and (Hidden eq false)&orderby=Title");   
    return this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)  
    .then((responseLibraries: SPHttpClientResponse) => {  
      if (responseLibraries.ok) { 
         return responseLibraries.json();
      }
        
    });  
  }

  protected getLibraryIcons(): Promise<SPIconList> {
    let currentWebUrl = this.context.pageContext.web.absoluteUrl;
    let requestUrl = currentWebUrl.concat("/_api/web/lists/GetByTitle('Document%20Library%20Icons')/items?$select=Title,URL");   
    return this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)  
    .then((responseIcons: SPHttpClientResponse) => {  
         
         if (responseIcons.ok) {  
          return responseIcons.json();
         }
        
    });  
  }

2 Answers 2

1

If you want to execute this 2 request in order, you can put the second one in the callback of the first one.

getLibraryIcons().then(res=>{
  console.log(res);
  getLibraries().then(v=>{    
    console.log(res);  
    console.log(v);  
  });  
});

BR

1
  • Thanks! This worked!
    – SPBogdan
    Commented Nov 18, 2020 at 22:15
0

Its time that you learn implementing async/await calls instead of using callbacks when in SPFx. You need to make you renderlibrary() as a async function and use await call for the getLibraryIcons and getLibraries function.

your functions will look like

const renderLibraries = async() =>{

const response1 = await getLibraryIcons();
const response2 = await getLibraries(response1)

}

const getLibraryIcons = async() =>{
 const output =  await this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1);
//..... your code here
return response.json()
}
const getLibraries = async() =>{

 const output =  await this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1);
//..... your code here
return response.json()

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.