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

[Anuj31005349h74z]

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

[rawvarun]

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.

[Anuj31005349h74z]

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

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 · Accepted solution]

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

[Anuj31005349h74z]

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.