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

[Kkkrish]

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

[MukeshYadav_ · Accepted solution]

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

[Shiv_Prakash_Patel]

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,