Reading JS array values using Sightly | Community
Skip to main content
P
patK-ze1xYs
Level 4
February 18, 2016
Solved

Reading JS array values using Sightly

  • February 18, 2016
  • 4 replies
  • 4038 views
Sample.js "use strict"; use( function () { var data = {}; data.item = []; data.item.push( { "message": "Message111", "anotherArray": [{ "ID": "1", "val": "1111" }] } ); return data; });
Sightly File.html <p data-sly-use.sample="create-case-form-validations.js"></p> ${sample. item.message} returns nothing ${sample. item } returns  message , anotherArray

 

How can I read the “ID” value of the JS array [anotherArray] using Sightly.   

    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 Amit_Kumar

    ptK wrote...

    1. ptK wrote...

      1. Sample.js
      2.  
      3. "use strict";
      4. use( function () {
      5. var data = {};
      6. data.item = [];
      7. data.item.push(
      8. {
      9. "message": "Message111",
      10. "anotherArray": [{
      11. "ID": "1",
      12. "val": "1111"
      13. }]
      14. }
      15. );
      16.  
      17. return data;
      18. });
       
      1.  
      2. Sightly File.html
      3.  
      4.  
      5. <p data-sly-use.sample="create-case-form-validations.js"></p>
      6.  
      7. ${sample. item.message} returns nothing
      8. ${sample. item } returns message , anotherArray

       

      How can I read the “ID” value of the JS array [anotherArray] using Sightly.   

       

       

    2. ;
     
    1.  
    2. Sightly File.html
    3.  
    4.  
    5. <p data-sly-use.sample="create-case-form-validations.js"></p>
    6.  
    7. ${sample. item.message} returns nothing
    8. ${sample. item } returns message , anotherArray

     

    How can I read the “ID” value of the JS array [anotherArray] using Sightly.   

     

    Well for your case you have to modify this a bit.

    in java script change 

    "use strict"; use( function () { var data = {}; data.item = []; data.item.push( { "message": "Message111", "anotherArray": [{ "ID": "1", "val": "1111" }] } ); return data.item[0].anotherArray[0][this.val]; });

    and while calling from your HTML.

    use 

    <p data-sly-use.sample="${'create-case-form-validations.js'  @ val='ID'}">${sample} </p>

    4 replies

    Kunal_Gaba_
    Kunal_Gaba_
    February 18, 2016

    Have you tried the following ? 

    ${sample.item[0].anotherArray[0].ID}  
    smacdonald2008
    smacdonald2008
    Level 10
    February 18, 2016

    Although not an Array - but rather an ArrayList returned by a Java method:

    List<String> hyperLinks = new ArrayList();

    hyperLinks.add("content"); 

    return hyperLinks ; 

    Sightly:

    AEM QueryBuilder Sightly Example: 
    <div data-sly-test="${properties.search}" data-sly-use.v="com.community.querybuilder.HelloService">
    <b>Here are the QueryBuilder results that corrresponds to ${properties.search}:</b>
        <ul data-sly-list="${v.files}"> 
            <li>${item}</li>
        </ul>   
    </div>

     

    See: https://helpx.adobe.com/experience-manager/using/sightly_querybuilder.html

    P
    patK-ze1xYsAuthor
    Level 4
    February 22, 2016

    smacdonald2008 wrote...

    Although not an Array - but rather an ArrayList returned by a Java method:

    List<String> hyperLinks = new ArrayList();

    hyperLinks.add("content"); 

    return hyperLinks ; 

    Sightly:

    AEM QueryBuilder Sightly Example: 
    <div data-sly-test="${properties.search}" data-sly-use.v="com.community.querybuilder.HelloService">
    <b>Here are the QueryBuilder results that corrresponds to ${properties.search}:</b>
        <ul data-sly-list="${v.files}"> 
            <li>${item}</li>
        </ul>   
    </div>

     

    See: https://helpx.adobe.com/experience-manager/using/sightly_querybuilder.html

     

    I am trying to read the simple JS value from sightly. 

    If I read it  from Java method it would be too much work to read single value.

    Is Java method the best option for my scenario ?

    Amit_Kumar
    Amit_KumarAccepted solution
    Level 10
    February 22, 2016

    ptK wrote...

    1. ptK wrote...

      1. Sample.js
      2.  
      3. "use strict";
      4. use( function () {
      5. var data = {};
      6. data.item = [];
      7. data.item.push(
      8. {
      9. "message": "Message111",
      10. "anotherArray": [{
      11. "ID": "1",
      12. "val": "1111"
      13. }]
      14. }
      15. );
      16.  
      17. return data;
      18. });
       
      1.  
      2. Sightly File.html
      3.  
      4.  
      5. <p data-sly-use.sample="create-case-form-validations.js"></p>
      6.  
      7. ${sample. item.message} returns nothing
      8. ${sample. item } returns message , anotherArray

       

      How can I read the “ID” value of the JS array [anotherArray] using Sightly.   

       

       

    2. ;
     
    1.  
    2. Sightly File.html
    3.  
    4.  
    5. <p data-sly-use.sample="create-case-form-validations.js"></p>
    6.  
    7. ${sample. item.message} returns nothing
    8. ${sample. item } returns message , anotherArray

     

    How can I read the “ID” value of the JS array [anotherArray] using Sightly.   

     

    Well for your case you have to modify this a bit.

    in java script change 

    "use strict"; use( function () { var data = {}; data.item = []; data.item.push( { "message": "Message111", "anotherArray": [{ "ID": "1", "val": "1111" }] } ); return data.item[0].anotherArray[0][this.val]; });

    and while calling from your HTML.

    use 

    <p data-sly-use.sample="${'create-case-form-validations.js'  @ val='ID'}">${sample} </p>
      Terms & ConditionsAccessibility statement

      Loading footer...