Expand my Community achievements bar.

SOLVED

Reading JS array values using Sightly

Avatar

Level 4
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.   

1 Accepted Solution

Avatar

Correct answer by
Level 10

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>

View solution in original post

4 Replies

Avatar

Employee Advisor

Have you tried the following ? 

${sample.item[0].anotherArray[0].ID}   

Avatar

Level 10

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

Avatar

Level 4

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 ?

Avatar

Correct answer by
Level 10

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>