Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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.