how can I get a list of object from my sling model to js or html ?

[rahul234dabas]

I have a list of object of type say <ABC> 

which I am accessing in my HTML file as :    

                                                                   data-sly-list.navItem="${model.myList}"

-> I am able to access the objects and their respective properties via this

-> but I want this list of object of type<ABC> in my js file 

-> currently I am accessing it from the attribute as : 

                                                               <p     data-myList="${model.myList}">

->when I am accessing it in my js file it's returning as string with the output like :

                                       com.abc.core.models.components.content.structure.BreadcrumbList@6456a1c6,com.abc.core.models.compone...

-> how can I get it as list of object , so that I can use it in my js code

Please help me find out 

Thank you

[Sachin_Arora_ · Accepted solution]

You can send Json Array( as a String) of Breadcrumb List from the Sling Models to data-myList attribute in HTML. 

You can use GSON for POJO to JSON conversion or you can write logic to create JsonArray containing data of breadcrumb as a JsonObject. Then in your getter method, you can send the jsonArray.toString() so that return type is String and understood by JS.
https://developer.adobe.com/experience-manager/reference-materials/6-5/javadoc/com/google/gson/JsonO...

http://www.javased.com/?api=com.google.gson.JsonObject

You can refer data-cmp-data-layer attribute of Core components which is created for similar purpose.

[rahul234dabas]

yes currently doing it via JSON only , is there any better approach to do it ?

[Sachin_Arora_]

There are other ways as well like using AJAX but this approach is good to go. Analytics integration is also following same design.
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/data-lay...

[rahul234dabas]

okay thank you