Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to access nested properties?

Avatar

Level 2

Hello,

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

1324810_pastedImage_0.png

I'm unable to access these properties with HTL:

1324931_pastedImage_1.png

Any info on this will be great.

Thanks...

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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>

View solution in original post

0 Replies

Avatar

Level 2

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

Avatar

Correct answer by
Community Advisor

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>

Avatar

Level 2

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