How to load component after an API call is completed?

[rakesh_h2]

Hi,

I have a component and a clientlib for the same. When the component loads, I want to call an ajax API call in the js file (in clientlib) and wait for the result.

1. After the result is obtained, I want to load the component (i.e. execute the html file). How can I achieve this?

2. I will have the API result in clientlib js file. How can I access the same inside HTL of that component?

Please help.

[Saravanan_Dharmaraj · Accepted solution]

@rakesh_h2 By default hide the component div using css "display:none" and from the javascript xhr call onSuccess method set , manipulate the div and show. If the xhr fails, display the div accordingly.

Please check the Simple Ajax example given here using html template to populate the component div.

https://www.endyourif.com/jquery-creating-templates-for-your-html-content/#google_vignette 

[mahi1729]

Well in its original form of HTL its not possible, as HTL is server side and ajax call is client side. However, similar to what @Saravanan_Dharmaraj suggested, you can probably have a default markup with hidden attributes to be sent to client side in the initial load, and once ajax call is executed, the same markup can be re-processed with data obtained. I suggest using handlebars, as its one of the most popular templating languages and gives you more control. Or any other templating language that can be used on client side should be fine. Hope this helps. Thanks