Using ajax call + Jquery to render data on page

[Sagarr]

Hi,

We are making one ajax call to retrieve the data from back-end (response in json format).

Flow is as below : 

1) Js which has ajax call is included in one of the page component jsp.(this ajax function will be called on page load)

2) This ajax call makes Post call to AEM servlethtml tags

3) AEM servlet gets the data from another system by making http connection (response data is in json format)

4) AEM servlet passes json back to ajax call and in ajax call success method we are reading the json and populating the json data on the page by surrounding the data with proper HTML tags.

Here the Json response that we are receiving is very big one and complex in structure.  While populating the json data on the page we wrote lot of Jquery code in ajax call by having required with in it. (ex: <table> , <tr>, <td> , <li> etc..). As i said this json is very huge and complex we had to write more than 200+ lines of code (Jquery + HTML tags)  within ajax call to populate it on the page.

Somehow we want to avoid writing all this code in JS , instead after receiving the data in AEM servlet we want to map this data to Beans (Jackson Beans) and want to get this Bean reference in component jsp and then put the data inside HTML tags by using Bean getter methods.

Can you let me know what will be best approach to get rid of writing HTML tags in Jquery and iterate through response data in components jsps/html files.  

Regards,

Sagar

[kautuk_sahni · Accepted solution]

Hi 

Please refer this the Adobe Helpx article covering most of what you have asked:

Link:- https://helpx.adobe.com/experience-manager/using/using-ajax-requests-display-cq.html

&

Link:- https://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

I would recommend you to Use some Jquery plugin to Render the JSON data retrieved from AJEX call.

Jquery plugins for rendering JSON data are:- http://www.jqueryscript.net/table/jQuery-Plugin-To-Render-Tables-From-JSON-or-JS-Objects-Table-Rende..., https://github.com/jongha/jquery-jsontotable  (You can find plugins may online).

I hope this will help you.

~kautuk

[amit20]

according to me u can achieve through below suggesting  
create service & in sling  model call that service and display that through loop in HTL.