Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

data-sly-list iteration for a JsonArray

Avatar

Level 2
 
 

Hi AEM Gurus,

 

I have a JSON Array like below sample

 

 

{
"sites": {
"label": "Parent LABEL",
"mobileLabel": "Parent Mobile Label",
"items": [
{
"href": "www.google.com",
"id": "goog",
"label": "Google Search"
},
{
"href": "www.yahoo.com",
"id": "yah",
"label": "yahoo site"
},
{
"href": "www.wikipedia.com",
"id": "wiki",
"label": "wikipedia"
}
]
}
}

Now i am trying to Iterate and get the values from this JSON array using data-sly-list something like as shown in below structure

<ul data-sly-list.key="${model.jsonarray}">
<li><a  href="${key.href}">${key.label} - ${key.id}</a></li>
</ul>

I know we can iterate Arraylist or a Map object but how do I iterate a JSON array. Please suggest.

 

Regards,

Rajashankar.R

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You would need to serialize the JSON string to either a List<HashMap> or List<Link>. Once you return a valid List object to your slightly business logic, your code should work as expected. 

However, if your list looks something like List<Json> then that would also work as well. You ultimately just need to have a valid List object with valid item objects.

View solution in original post

8 Replies

Avatar

Correct answer by
Community Advisor

You would need to serialize the JSON string to either a List<HashMap> or List<Link>. Once you return a valid List object to your slightly business logic, your code should work as expected. 

However, if your list looks something like List<Json> then that would also work as well. You ultimately just need to have a valid List object with valid item objects.

Avatar

Community Advisor

Hi @rajaram33,

 

You can use the below code, convert JSONArray to List and pass it to sightly.

 

ArrayList<String> listdata = new ArrayList<String>();
if (jArray != null) {
for (int i=0;i<jArray.length();i++){
listdata.add(jArray.getString(i));
}
}

 

Hope this helps.

 

Thanks,

Kiran Vedantam.

Avatar

Level 2
Let me try both options and get back soon please do not close this as resolved

Avatar

Level 2
I tried adding Json Array to array list but when i try to access it in htl like this <div class="cmp-helloworld__item" data-sly-use.model="com.demoapp.core.models.FooterModel"> <ul data-sly-list.child="${model.demoItem}"> <li > ${child.label} Value: ${child.href}</li> </ul> </div>

Avatar

Level 2
Kiran please suggest how to parse the list in this case in htl which has the json array populated at model.I am struglling at htl to get the value

Avatar

Level 2
 

Hi @BrianKasingli @Kiran_Vedantam ,

I tried as suggested by creating a Link with hashmap

 

 

public List<HashMap<String, String>> getListItem(JSONObject taxanomyDat) {
log.info("Inside Model getDemoItem");

List<HashMap<String, String>> prodArrayList = new ArrayList<HashMap<String, String>>();

Map<String, String> siteLink = new LinkedHashMap<String, String>();

siteLink.put("label1", "www.gmail.com");
siteLink.put("label2", "www.yahoo.com");
prodArrayList.add((HashMap<String, String>) siteLink);

return prodArrayList;
}

public List<HashMap<String, String>> getDemoItem() {
return demoItem;
}

 

 

And in HTL i am not sure What mistake i am doing or how to get the key and value inside haspmap of arraylist.

 

 

<div class="cmp-helloworld__item" data-sly-use.model="com.myapp.core.models.SampleModel">
<p class="cmp-helloworld__item-label">Model message:</p>
<ul data-sly-list="${model.demoItem}">
<li >${item.siteLink}</li>
</ul>
</div>