Mutltifield to array in AEM Component | Community
Skip to main content
Prashardan
Prashardan
Level 4
April 12, 2023
Solved

Mutltifield to array in AEM Component

  • April 12, 2023
  • 4 replies
  • 1972 views

Hi Team

 

I have created a component where I have two multifield properties, and I want to convert the multifield and array format. 

 

"items": {"jcr:primaryType": "nt:unstructured","item0": {"jcr:primaryType": "nt:unstructured","text": "Same as Permanent address","value": "same as permanent address","selected": "false"},"item1": {"jcr:primaryType": "nt:unstructured","text": "Others","value": "others","selected": "false"}},"mapping": {"jcr:primaryType": "nt:unstructured","item0": {"jcr:primaryType": "nt:unstructured","destination": "two","source": "one"},"item1": {"jcr:primaryType": "nt:unstructured","destination": "four","source": "three"},"item2": {"jcr:primaryType": "nt:unstructured","destination": "six","source": "five"}}

 

Here I have items and mapping multifields. 

I would like to have structure like source: ["one","three","five"] and destination: ["two","four","six"]

 

Could anyone please help on this.

 

Is it possible to achieve it using htl or js. 

 

Thanks and Regards

Prashanthi

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 Sady_Rifat

Hello @prashardan ,
according to your structure and your requirement(Using HTL & JS) you can achieve this by this way.
In HTL you need to create the list value in a HTML attribute using Slightly loop.

<sly data-sly-use.cmpResource="${resource.path}/mapping"></sly> <sly data-sly-set.destination=""/> <sly data-sly-set.source=""/> <sly data-sly-list.cmpItem="${cmpResource.listChildren}"> <sly data-sly-set.destination="${[destination, cmpItem.destination] @ join = ','}"/> <sly data-sly-set.source="${[source, cmpItem.source] @ join = ','}"/> </sly> <div class="list-item" data-destination="${destination}" data-source="${source}"></div>

 When you get the attribute value then get them from JS and create the list.

let destination = document.getElementsByClassName('list-item')[0].getAttribute('data-destination'); console.log(destination.split(',').filter(Boolean)); // Output: ["two", "four", "six"]

4 replies

Sady_Rifat
Community Advisor
Sady_RifatCommunity AdvisorAccepted solution
Community Advisor
April 12, 2023

Hello @prashardan ,
according to your structure and your requirement(Using HTL & JS) you can achieve this by this way.
In HTL you need to create the list value in a HTML attribute using Slightly loop.

<sly data-sly-use.cmpResource="${resource.path}/mapping"></sly> <sly data-sly-set.destination=""/> <sly data-sly-set.source=""/> <sly data-sly-list.cmpItem="${cmpResource.listChildren}"> <sly data-sly-set.destination="${[destination, cmpItem.destination] @ join = ','}"/> <sly data-sly-set.source="${[source, cmpItem.source] @ join = ','}"/> </sly> <div class="list-item" data-destination="${destination}" data-source="${source}"></div>

 When you get the attribute value then get them from JS and create the list.

let destination = document.getElementsByClassName('list-item')[0].getAttribute('data-destination'); console.log(destination.split(',').filter(Boolean)); // Output: ["two", "four", "six"]
    Prashardan
    PrashardanAuthor
    Level 4
    April 18, 2023

    Many thanks @sady_rifat 
    It worked perfectly. I have implemented my requirement completely with this one. 

    Many thanks once again.

      Sady_Rifat
      Community Advisor
      Sady_RifatCommunity Advisor
      Community Advisor
      April 18, 2023

      @prashardan , If it works according to your requirement, please mark this as the correct reply. So that, others get help from it.

        ShaileshBassi
        Community Advisor
        ShaileshBassiCommunity Advisor
        Community Advisor
        April 12, 2023

        @prashardan We have the sling model, and it is advised to write the conversion and other business logic within it and then return it to the HTL.

         

        @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) public class HelloWorldModel { @PostConstruct public void init() { // Business logic to read the properties and then finally convert } }

        You can also try out the javascript use api for the convertion and then return the result to HTL.

         

        Hope this helps!

        Thanks

         

          Madhur-Madan
          Community Advisor
          Madhur-MadanCommunity Advisor
          Community Advisor
          April 12, 2023

          Hi @prashardan,
          It is recommended to use sling models/service to write the business logic. You can implement it as follows

          @Model(adaptables = Resource.class,
                  defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
          public class MultiArrayModel {

              @Getter
              @Inject
              private List<MultiArrayItem> mapping;

              @Getter
              private List<String> sourceArray = new ArrayList<>();

              @Getter
              private List<String> destinationArray = new ArrayList<>();

              @PostConstruct
              void init() {
                  mapping.forEach(item->{
                      sourceArray.add(item.getSource());
                      destinationArray.add(item.getDestination());
                  });
              }

           

          @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
          public class MultiArrayItem {

              @Getter
              @ValueMapValue
              private String source;


              @Getter
              @ValueMapValue
              private String destination;

          }

          The sightly will simply look like

          Dialog

          Output looks like:


          Hope this helps!

          Thanks

           

            Terms & ConditionsAccessibility statement

            Loading footer...