How can I get data from azure web API in SPFx web part?

Question

How can I load data from azure web API into SPFx web part?

API:

https://someazuresite.azurewebsites.net/api

Code I am using currently:

this.props.context.spHttpClient.get(`https://someazuresite.azurewebsites.net/api`,  
          SPHttpClient.configurations.v1)  
          .then((response: SPHttpClientResponse) => {  
            response.json().then((responseJSON: any) => {  
              console.log(responseJSON);  
            });  
          }); 

Answer 1

If your web API is secured using Azure AD application, by using the AadHttpClient, you can easily connect to APIs secured by using Azure AD without having to implement the OAuth flow yourself.

Check this Microsoft official documentation for step by step tutorial for same: Connect to Azure AD-secured APIs in SharePoint Framework solutions

Also, check below SPFx samples developed and shared by community members which might help you with development of your SPFx web part:

1. Call custom Web API secured with AAD from SharePoint Framework client-side web part
2. Azure Active Directory implicit flow authentication samples

---

Update

Update from this post, use code like:

this.props.context.spHttpClient.get(`https://someazuresite.azurewebsites.net/api`,  
    SPHttpClient.configurations.v1)  
    .then((response: SPHttpClientResponse) => {  
        return response.json().then((responseJSON: any) => { 
            for(let index = 0; index < responseJSON.length; index++){
                console.log(responseJSON[index].Title);
            }
        });  
    });