Reading JS array values using Sightly

[patK-ze1xYs]

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.   

[Kunal_Gaba_]

Have you tried the following ? 

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

[smacdonald2008]

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

[patK-ze1xYs]

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 · Accepted solution]

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>