How to pass a nested object as parameter in webcomponent in htl. | Community
Skip to main content
A
Anuj31005349h74z
New Participant
July 26, 2023
Solved

How to pass a nested object as parameter in webcomponent in htl.

  • July 26, 2023
  • 3 replies
  • 2200 views
<sly data-sly-use.helper="com.adobe.cq.wcm.core.components.models.Component" data-sly-use.component="com.mkovacek.adobe.aem.core.models.CartModel" data-sly-use.templates="core/wcm/components/commons/v1/templates.html" data-sly-test.showPlaceholder="${!component.name}" ></sly> <sly data-sly-test="${!showPlaceholder}"> <test-cart id="${helper.id}" name="${component.name}" type="${component.type}" price="${component.price}" buttons="${component.buttons}"> </test-cart> </sly>

this is the HTL code where, test-cart is a web component, and in the html, this test cart has options to render multiple buttons. So buttons variable above is a array of json objects. in html react side button shows parse error, something is wrong with this data and I am not sure what and how to pass an array of objects.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anudeep_Garnepudi

@anuj31005349h74z 

You are getting parsing error because you are not passing json data to frontend, can you check what is type of data being rendered in frontend for attribute "buttons"? I assume something like below.

buttons="ButtonModel(...),ButtonModel(...),ButtonModel(...),..."

convert the List<ButtonModel> to JSON and pass it to frontend.

3 replies

Anudeep_Garnepudi
Anudeep_GarnepudiAccepted solution
New Participant
July 29, 2023

@anuj31005349h74z 

You are getting parsing error because you are not passing json data to frontend, can you check what is type of data being rendered in frontend for attribute "buttons"? I assume something like below.

buttons="ButtonModel(...),ButtonModel(...),ButtonModel(...),..."

convert the List<ButtonModel> to JSON and pass it to frontend.

    A
    Anuj31005349h74zAuthor
    New Participant
    August 1, 2023

    Thanks, yes, this works, I was asuming that when I pass the data through HTL to the web component, it would internally stringify the data and pass. but that was not the case. Anyways, thanks.

    Ekhlaque
    Ekhlaque
    Employee
    July 27, 2023

    Here's how you can achieve this in your code:

    <sly data-sly-use.helper="com.adobe.cq.wcm.core.components.models.Component" data-sly-use.component="com.mkovacek.adobe.aem.core.models.CartModel" data-sly-use.templates="core/wcm/components/commons/v1/templates.html" data-sly-test.showPlaceholder="${!component.name}"> </sly> <sly data-sly-test="${!showPlaceholder}"> <!-- Define the nested object using inline data-sly variable --> <sly data-sly-use.buttonsObject="{ 'buttonLabel': 'Click me', 'buttonLink': '/example/link' }"> <!-- Pass the nested object as a parameter to the web component --> <test-cart id="${helper.id}" name="${component.name}" type="${component.type}" price="${component.price}" buttons="${buttonsObject}"> </test-cart> </sly> </sly>
      rawvarun
      rawvarun
      New Participant
      July 26, 2023

      You need to store all buttons data in List and return it via SlingModel Exporter (i.e. CartModel).

       

      Snippet for CartModel

      public List<ContentCard> getButtons() { return new ArrayList<>(buttons); }

       Also, ensure you capture all relevant data and store it in buttons.

        A
        Anuj31005349h74zAuthor
        New Participant
        July 27, 2023
        @ChildResource(name="buttons") @Getter private List<ButtonModel> buttons;

         

        This is the a variable in my cart model. It does get me the variable from /content/.... to HTL, but passing this variable from htl to web-component is an issue. 

          Terms & ConditionsAccessibility statement

          Loading footer...