Expand my Community achievements bar.

SOLVED

data-sly-list loop in an array and fetch both array objects data.

Avatar

Level 5

Am having 2 ListOList objects as below assuming both are of same size each
where as while rendering the loop in HTL i need to render mydomelement loop and get even the mydommeta value of same index.
example : <div data-test-value="${mydommeta}" gets fails to instantiate without any list or doesn't even work with index.

List<String> mydomelement = new ArrayList<>();
List<String> mydommeta = new ArrayList<>();
...
<sly data-sly-list.mydomElem=="${mytestobj.mydomelement}">
<sly data-sly-list.cell="${mydomElem}">
<div data-test-value="${mydommeta}">${cell}</div>
</sly>
</sly>


<sly data-sly-list.mydomElem=="${mytestobj.mydomelement}" data-sly-list.mydommetaElem=="${mytestobj.mydommeta}"> -- Makes the loops repeated twice. any suggestions to fetch the second List obj with in fist Array List loop.?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Kkkrish ,

You can access the second list data based on the corresponding index of first list

 

<div data-sly-use.model="com.projectname.core.models.SampleModel">
<ul data-sly-list.data=${model.mydommeta}>
<li>${data}-${model.mydomelement[dataList.index]}</li>
</ul>
</div>

 

Or

You can return hashmap and iterate in sightly as mentioned here https://gist.github.com/yupadhyay/84ae7b17e50ebf420605

For more details you may refer https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md

Thanks

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @Kkkrish ,

You can access the second list data based on the corresponding index of first list

 

<div data-sly-use.model="com.projectname.core.models.SampleModel">
<ul data-sly-list.data=${model.mydommeta}>
<li>${data}-${model.mydomelement[dataList.index]}</li>
</ul>
</div>

 

Or

You can return hashmap and iterate in sightly as mentioned here https://gist.github.com/yupadhyay/84ae7b17e50ebf420605

For more details you may refer https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md

Thanks

Avatar

Community Advisor

Hi @Kkkrish 

Instead of two List you can combine the two lists into a single list of maps or objects as below:

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

    public static class DomElementMeta {
        private final String element;
        private final String meta;

        public DomElementMeta(String element, String meta) {
            this.element = element;
            this.meta = meta;
        }

        public String getElement() {
            return element;
        }

        public String getMeta() {
            return meta;
        }
    }

    @Inject
    private List<String> mydomelement;

    @Inject
    private List<String> mydommeta;

    public List<DomElementMeta> getDomElementMetaList() {
        List<DomElementMeta> combinedList = new ArrayList<>();
        for (int i = 0; i < mydomelement.size(); i++) {
            combinedList.add(new DomElementMeta(mydomelement.get(i), mydommeta.get(i)));
        }
        return combinedList;
    }
}

Iterate over the combined list in HTL

<sly data-sly-list.domItem="${model.domElementMetaList}">
    <div data-test-value="${domItem.meta}">${domItem.element}</div>
</sly>

Regards,

Shiv Prakash