Returning Object in Sightly Javascript Use-API

[B_Stockwell]

I can't seem to return and use an object from my js use array. In the below example I'm trying to make a parameter list for use later in a java use-api call, however, the parameter array comes up empty back on the sightly end. Any idea what I'm doing wrong?

newsList.js:

"use strict"; use( function () { var params = []; params['limit'] = 0; params['page'] = 0; params['term'] = ""; params['articles'] = ""; params['alsoQuery'] = "false"; params['author'] = ""; params['contacts'] = ""; params['dateRange'] = "unlimited"; params['startDate'] = "0"; params['endDate'] = "TODAY"; params['hasVideo'] = "false"; params['tags'] = []; params['anyall'] = "any"; return { parameters: params }; });

Sightly code

<div  data-sly-use.newsList="newsList.js"> a: ${newsList.parameters['limit']} b: ${newsList.parameters.limit} len: ${newsList.parameters.length} </div>

Result

a: b: len: 0

[smacdonald2008]

See this community article that works with AEM, Java, and Slightly:

https://helpx.adobe.com/experience-manager/using/creating-sightly-component.html

In this article - we are returning String values.

public class HeroTextBean {
     
    /** The heading text. */
    private String headingText;
     
    /** The description. */
    private String description;
    /**
     * @return the headingText
     */
    public String getHeadingText() {
        return headingText;
    }
    /**
     * @param headingText the headingText to set
     */
    public void setHeadingText(String headingText) {
        this.headingText = headingText;
    }
    /**
     * @return the description
     */
    public String getDescription() {
        return description;
    }
    /**
     * @param description the description to set
     */
    public void setDescription(String description) {
        this.description = description;
    }

However - you can extend that and make the Java method return String[].

[B_Stockwell]

Thanks

I'd prefer to be able to do this in Javascript, but I'm beginning to see that the js Use-API has some limitations. Working with js objects seems like it should be fairly straightforward, but is this possibly one of the limitations of the JS use-API?

[leeasling · Accepted solution]

For what you're doing you can easily switch your code to make it work with the JS API.

Try something like this:

use(function () { var params = {}; params.limit = 0; params.page = 0; params.term = ""; params.articles = ""; params.alsoQuery = true; params.author = ""; params.contacts = ""; params.dateRange = "unlimited"; params.startDate = "0"; params.endDate = "TODAY"; params.hasVideo = false; params.tags = []; params.anyall = "any"; return params; });

Assuming that your file is named "params.js" you can utilize as follows:

<div data-sly-use.params="params.js"> ${params.limit @ context='number'}<br /> ${params.dateRange} </div>

And so on

[B_Stockwell]

Thanks, What I was hoping to do was keep objects separate so i could return params, otherObject1, otherObject2 etc. But I dont think this is possible. This solution works, so I think I'll just go with this and use multiple js use files so I can return and work with multiple objects.

[leeasling]

I don't know that i'm totally understanding what you mean when you say return multiple objects, but that too is very easy if my understanding is correct:

use(function () { var params = {}; params.limit = 0; params.page = 0; params.term = ""; params.articles = ""; params.alsoQuery = true; params.author = ""; params.contacts = ""; params.dateRange = "unlimited"; params.startDate = "0"; params.endDate = "TODAY"; params.hasVideo = false; params.tags = []; params.anyall = "any"; var otherObject1 = {}; otherObject1.test = "Test"; var otherObject2 = {}; otherObject2.anotherTest = "Another Test"; return { parameters: params, otherObject1: otherObject1, otherObject2: otherObject2 }; });

<div data-sly-use.params="params.js"> ${params.parameters.limit @ context='number'}<br /> ${params.parameters.dateRange} <hr /> ${params.otherObject1.test} <hr /> ${params.otherObject2.anotherTest} </div>

[alexr21]

This requires tightly coupling the Sightly code to the keys available in the json object. Is there any way to do this generically? I just need to dump out the entire json object within a script tag in the mark-up, without hard-coding the keys in the Sightly code.