Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

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

Avatar

Level 2
<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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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.

View solution in original post

5 Replies

Avatar

Community Advisor

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.

Avatar

Level 2
@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. 

Avatar

Employee

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>

Avatar

Correct answer by
Community Advisor

@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.

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.