How access nested child attributes from a list in Adobe AEM using sightly?

Question

I am trying to access a list of items having 'title' and 'url' in them. I want to access the 'item' or 'url' but not sure how to.

The child items are accessible but with:

${child} // prints like this {"title":"Hello","url":"www.hello.com"}
but ${child.url} or ${child['url'} doesn't print anything.

This is my html:

<div data-sly-use.model="au.com.nbnco.website.model.components.Links">
    <h6>${properties.linksTitle @ context="html"}</h6>
    <ul data-sly-list.child="${properties.links}">
        <li> ${child.url}</li>  // not printing anything
        <li> ${child.['url']}</li>  // not printing anything
        <li> ${child}</li> // prints like this {"title":"Hello","url":"www.hello.com"}
    </ul>
</div>

And this my dialog.xml.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="cq:Dialog"
          width="640"
          height="480"
          xtype="dialog">
    <items
            jcr:primaryType="cq:Widget"
            xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <configurations
                    jcr:primaryType="cq:Panel"
                    title="Configuration">
                <items jcr:primaryType="cq:WidgetCollection">
                    <links_title
                            jcr:primaryType="nt:unstructured"
                            fieldLabel="Links Title"
                            name="./linksTitle"
                            defaultValue="Links"
                            xtype="textfield"/>
                    <links
                            jcr:primaryType="cq:Widget"
                            name="./links"
                            title="Links"
                            xtype="multifield">
                        <fieldConfig
                                jcr:primaryType="cq:Widget"
                                border="true"
                                layout="form"
                                padding="5px"
                                xtype="multi-field-panel">
                            <items jcr:primaryType="cq:WidgetCollection">
                                <title
                                        jcr:primaryType="cq:Widget"
                                        dName="title"
                                        fieldLabel="Title"
                                        xtype="textfield"/>
                                <url
                                        jcr:primaryType="cq:Widget"
                                        dName="url"
                                        fieldLabel="Url"
                                        xtype="textfield"/>
                            </items>
                        </fieldConfig>
                    </links>
                </items>
            </configurations>
        </items>
    </items>
</jcr:root>

As I see you don't use model at all, you accessing items using properties. Also, it is possible that you don't have getters in children elements — dzenisiy, Nov 06 '17 at 10:36

score 2 · Answer 1 · answered Jan 09 '18 at 19:19

You should be able to access properties url and title like this:

<ul data-sly-list.child="${properties.links}">
        <li> ${child.properties.url}</li>
        <li> ${child.properties.title}</li>
    </ul>

very similar to how you accessed your other custom property "links" of currentPage

score 1 · Answer 2 · answered Nov 06 '17 at 12:32

1

It looks like the links property is stored as multiple JSON strings. HTL/Sightly does not parse into JSON strings. You will need a use-api object to parse the JSON and output the properties.

answered Nov 06 '17 at 12:32

Vlad

10,602
2
36
38

ashxvi · Answer 3 · 2018-03-13T11:24:47.780

HTL doesn't parse your objects. You can use a JS helper function to parse your elements.

<sly data-sly-list.jsonLinks="${properties.links}">
<ul data-sly-use.parsedLinks="${'../parseMyJson.js' @ element=jsonLinks}">
<li>${parsedLinks.title}</li>
<li>${parsedLinks.url}</li>
</ul>
</sly>

And in the parent folder for example, create a parseMyJson.js with :

use(function () {
    var element = this.element;
    if (element) {
        element = JSON.parse(element);
    }
    return element;
});

How access nested child attributes from a list in Adobe AEM using sightly?

3 Answers3