Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Is there any possibility to read the json object in sightly

Avatar

Level 1

From sling Model I'm returning the list of json objects like the below
[{"day":"Monday","from":"10:00","to":"21:00"},{"day":"Tuesday","from":"10:00","to":"21:00"}]
Instead of pojo I want to read the data in sightly.

<sly data-sly-list.workingHours="${item.workingDays}">
<p>${workingHours['day']}:from ${workingHours.from} to ${workingHours.to}</p>
</sly>

 Tried with square notation also none of them worked any suggestion please.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

If you already have a sling model, why don't you instantiate it in your HTL script and read the requested data from it?

View solution in original post

5 Replies

Avatar

Community Advisor

Hi @kirankumar-42 ,

There's no explicit API to parse JSON directly in HTL. 

  • If you are using JS-Use API then its ultimately JS at the end and parsing it is nothing but simply using the keys to get desired value out of JSON.
  • If you are using Java-Use API then the one I have been using to map JSON to java objects is GSON. GSON is pretty handy in converting JSON to JAVA Object and vice-versa.

Instead of using org.apache.sling.commons.json.JSONObject API, change to GSON API and convert JSON to Java bean object and then access in HTL.
Sharing piece of code for your reference which was already discussed:

HTML

<sly data-sly-use.greatdeals="GreatDeals" />
    <sly data-sly-use.greatdealsJS="${'greatdeals.js' @ jsonString=greatdeals.jsonGreatDeals}" />
<sly data-sly-list.deal="${greatdealsJS}">
  <div>${deal} : ${greatdealsJS[deal]}</div>
</sly>

greatdeal.js

use(function () {
    return JSON.parse(this.jsonString);
});

GreatDeal.java

public JSONObject getJsonGreatDeals() {
        JSONObject jsonObject = null;
        try {
            jsonObject = new JSONObject();
            jsonObject.put("deal1", "test1");
            jsonObject.put("deal2", "test2");
            jsonObject.put("deal3", "test3");
        } catch (Exception e) {
            LOGGER.error("Could not create JSON", e);
        }
        return jsonObject;
    }

 Reference: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/unable-to-access-jsonobjec...

Hope that helps you!

Regards,

Santosh

Avatar

Community Advisor

@kirankumar-42 There is an alternate way:

Instead of using org.apache.sling.commons.json.JSONObject API, change to GSON api and converted json to javabean object and then accessing in sightly file.

 

But using JSONObject in sightly is still not possible.

 

Thanks

Avatar

Correct answer by
Employee Advisor

If you already have a sling model, why don't you instantiate it in your HTL script and read the requested data from it?

Avatar

Community Advisor

Hi @kirankumar-42 As you are already using Sling Model and returning List. Iterate JSON in sling model and put each iteration in either Map to Bean. Keep all these objects in List. Iterate this list in Sightly. 

/*  Write your code to add information in Map and List */    
public List<Map<String,String>> getWorkingDays(){
        List<Map<String,String>> days=new ArrayList<>();
        Map<String,String> day1=new HashMap<>();
        day1.put("day","Monday");day1.put("from","9:00");day1.put("to","4:00");
        days.add(day1);
        Map<String,String> day2=new HashMap<>();
        day2.put("day","Tuesday");day2.put("from","10:00");day2.put("to","5:00");
        days.add(day2);
        return days;
    }

Iterate in Sightly

/*  htl is sling model object */
<div data-sly-list.item="${htl.workingDays}">
   <p> Day : ${item.day} -> From  ${item.from} to ${item.to}</p>
</div>

Avatar

Community Advisor

@kirankumar-42 Use Handlebars, if you do not want the component to be cached and are getting the json response via the AJAX request.
There's no explicit api to parse json directly in sightly. Instead you can dump the json in a handlebar template which can display the json data.

 

If you are using sightly, then as suggested by @Jörg_Hoh instantiate it in your HTL script and read the requested data from it, or 

Parse the json in the SlingModel and either return a List or a Map and iterate the same in sightly.

Thanks