How to access nested properties?

[Former Community Member]

Hello,

I have the following nested properties in one of my pages:

I'm unable to access these properties with HTL:

Any info on this will be great.

Thanks...

[awadheshv]

try ${properties["carouselImages/item0/isActive"]}

[Former Community Member]

Hi awadheshv​,

This sure is helpful and thank you for replying.

The only issue with hard-coding item0 is that there could be n number of items and cannot be known when building the component.  Is there a way to iterate over the items that is under carouselImages?

Something like:

<ol data-sly-list="${properties['carouselImages']}">
     <li>${item.isActive}</li>
     <li>${item.url}</li>
</ol>

Regards...

[Himanshu_Singhal · Accepted solution]

Hi Akash,

You could get children of carouselImages in a list using Sling model or WcmUse Api like this:

private java.util.List<Resource> list;

final Resource resource = request.getResource();

Resource childResource = resource.getChild("links");

Iterator<Resource> resources = resource.listChildren();

while (resources.hasNext()) {

list.add(resources.next());

}

And, then using that model in sighly using

<sly data-sly-use.model="org.sample.Model"></sly>

<sly data-sly-list=${model.list}>

{item.<property-name>}

</sly>

[Former Community Member]

The other answers have been very helpful.  I have also tried something with server-side-Javascript and this snippet of code is what i'm working with:

var carouselImageNodes, carouselImages;

//

setCarouselImageNodes();

setCarouselImages();

//

function setCarouselImageNodes(){

        carouselImageNodes = {};

        if(typeof this.currentNode != 'undefined') {

            carouselImageNodes = this.currentNode.hasNode("carouselImages") ?

                this.currentNode.getNode("carouselImages").getNodes() :

                {};

        }

}

function setCarouselImages() {

        carouselImages = Object.keys(carouselImageNodes).map(function(key){

            return {

                url: properties['carouselImages/'+ key +'/url'],

                isActive: properties['carouselImages/'+ key + '/isActive'],

                caption: {

                    heading: {

                        element: properties['carouselImages/'+ key + '/caption/heading/element'],

                        text: properties['carouselImages/'+ key + '/caption/heading/text']

                    },

                    paragraph: {

                        element: properties['carouselImages/'+ key + '/caption/paragraph/element'],

                        text: properties['carouselImages/'+ key + '/caption/paragraph/text']

                    }

                }

            };

});

Thanks & Good Luck...