Displaying multifield using Sightly and JavaScript | Community
Skip to main content
medhik
medhik
Level 2
June 9, 2017
Solved

Displaying multifield using Sightly and JavaScript

  • June 9, 2017
  • 3 replies
  • 2247 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Feike_Visser1

    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!

    3 replies

    Feike_Visser1
    Adobe Employee
    Feike_Visser1Adobe Employee
    Adobe Employee
    June 9, 2017

    What is your expected output?

    smacdonald2008
    smacdonald2008
    Level 10
    June 9, 2017

    Why not use Java?

    Feike_Visser1
    Adobe Employee
    Feike_Visser1Adobe EmployeeAccepted solution
    Adobe Employee
    June 10, 2017

    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!

      Terms & ConditionsAccessibility statement

      Loading footer...