Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Displaying multifield using Sightly and JavaScript

Avatar

Level 2

Hey,

I'm looking at a way using Sightly to read data from a node with properties as followed.

Name: footercol1

Type: String[]

Value: {"key1":"value1","key2","value2"},{"key1":"value3","key2","value4"}.

I'm looking a JavaScript way instead of Java to do that.

Using data-sly-list, so far I'm able to print the whole JSON string so far i.e.

Looking forward to some help here.

Thanks.

1 Accepted Solution

Avatar

Correct answer by
Employee

First: Your JSON is invalid, make sure to fix that first.

I have made an example on how the deal with this in Javascript.

HTL:

<ul data-sly-use.jsonprocessing="json.js" data-sly-list="${jsonprocessing.keys}">

   <li>${item}</li>

</ul>

Javascript:json.js

   use(function () {

    var jsondata = currentPage.properties.get("jsondata");

    var jsonlength = currentPage.properties.get("jsondata").length;

    var keys = [];

    for (var i=0; i < jsonlength; i++) {

        keys.push(JSON.parse(jsondata[i]).key1);

    }

    return {

        keys : keys

    };

});

Happy programming!

View solution in original post

3 Replies

Avatar

Correct answer by
Employee

First: Your JSON is invalid, make sure to fix that first.

I have made an example on how the deal with this in Javascript.

HTL:

<ul data-sly-use.jsonprocessing="json.js" data-sly-list="${jsonprocessing.keys}">

   <li>${item}</li>

</ul>

Javascript:json.js

   use(function () {

    var jsondata = currentPage.properties.get("jsondata");

    var jsonlength = currentPage.properties.get("jsondata").length;

    var keys = [];

    for (var i=0; i < jsonlength; i++) {

        keys.push(JSON.parse(jsondata[i]).key1);

    }

    return {

        keys : keys

    };

});

Happy programming!