Expand my Community achievements bar.

Adobe Summit 2025: AEM Session Recordings Are Live! Missed a session or want to revisit your favorites? Watch the latest recordings now.

Mark Solution

This conversation has been locked due to inactivity. Please create a new post.

SOLVED

Displaying JSON Object or JSON with HTL and Javascript Use

Avatar

Level 2

How can I display JS object properties or iterate over JSON objects using sly-data-list.

Here's my particular JSON

{"make":"Honda","model":"civic"}

Would something like this require a mixed model with local Java class?

Thanks

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

try below

HTL

<div data-sly-use.head="logic.js">

<ul data-sly-list="${head.list2}">

  <li>${item.make}</li>

</ul>

</div>

logic.js

use(function () {

    return {

        list2:JSON.parse('[{"make":"Honda","model":"civic"} ,{"make":"Honda2","model":"civic2"}]')

    }

});

Arun Patidar

AEM LinksLinkedIn

View solution in original post

3 Replies

Avatar

Level 2

Yeah this is spam....

Avatar

Correct answer by
Community Advisor

try below

HTL

<div data-sly-use.head="logic.js">

<ul data-sly-list="${head.list2}">

  <li>${item.make}</li>

</ul>

</div>

logic.js

use(function () {

    return {

        list2:JSON.parse('[{"make":"Honda","model":"civic"} ,{"make":"Honda2","model":"civic2"}]')

    }

});

Arun Patidar

AEM LinksLinkedIn

Avatar

Level 2

Thank you, I was reading it as a JSON in crxde property and overlooked that it's actually a string.

Was missing the JSON.parse function