How to pass a nested object as parameter in webcomponent in htl. | Community
Skip to main content
A
Anuj31005349h74z
Level 2
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

rawvarun
Community Advisor
rawvarunCommunity Advisor
Community Advisor
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
    Level 2
    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. 

      Ekhlaque
      Adobe Employee
      EkhlaqueAdobe Employee
      Adobe 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>
        Anudeep_Garnepudi
        Community Advisor
        Anudeep_GarnepudiCommunity AdvisorAccepted solution
        Community Advisor
        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
          Level 2
          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.

          Terms & ConditionsAccessibility statement

          Loading footer...