CODEWITHSUNDEEP
javascriptarraysaemsightly
Phoenix_uy
Phoenix_uy

Reputation: 3294

Use array object from javascript use-api into javascript with sightly

I have a javascript use-api file that returns an array. It's important to know that this js is used in other html, that's why i can't put the code on the html Something like this (myfile.js):

"use strict";

var global = this;

use(function() {
    var myArray = [];
    //something to fill the array with custom objects and inner arrays
    return myArray;
});

Then in my html i have some code but the most important is that i need to use this array in javascript but i can't figure out how to do it because if i use the context='scriptString' or context='scriptToken' it doesn't work and i cant use the array.

This is the code:

<div data-sly-use.test="myfile.js">
   <!-- some html irrelevant code -->

   <script type='text/javascript'>
       //this returns a flat string representation of the first level of the array
       var a = '${test @context='scriptString'}';
       //this give an error in the code
       var b = ${test @context='scriptString'};
       //this returns empty
       var c = '${test @context='scriptToken'}';
   </script>
</div>

Is there a way to use this array (without modifying myfile.js file)

Upvotes: 0

Views: 3212

Answers (3)

Jordan Shurmer
Jordan Shurmer

Reputation: 1066

Sounds like you have a JS object, array in this case, that you want to use on both the server-side and the client-side. You build it server-side using the Use-API and use it however you need to in the sightly templates, then you're trying to add the same object to a <script> tag so that the client can also use it. Is this correct? If so then try one of these, if you haven't already

<div data-sly-use.test="myfile.js">
<!-- some html irrelevant code -->

 <script type='text/javascript'>
     //scriptToken context, no quotation marks
     var b = ${test @context='scriptString'};
     //unsafe context, hope you trust the source of this object!
     var c = ${test @context='unsafe'};
 </script>
</div>

Hoever, if you do not need the JS object on the server-side then there's no need ot use the Use-API. Just create a separate sightly file which adds the javascript to the page, and include it in the sightly files that need it.

/apps/path/to/shared/myfile.html

<script type="text/javascript">
  var global = this;

  var myArray = [];
  //something to fill the array with custom objects and inner arrays
  //etc.
 </script>

Then the templates that need that JS simply include it

<div>
  <!-- some html irrelevant code -->
  <sly data-sly-include="path/to/shared/myfile.html"></sly>
</div>

Upvotes: 1

Francois Cournoyer
Francois Cournoyer

Reputation: 174

I just did tests myself and it worked fine. Here's what I did.
Just a note, this is on AEM 6.1 (without SP1)

test.html:

<div data-sly-use.test="test.js">
    <script type="text/javascript">
        var test = [${test @context="scriptString"}];       
    </script>
    This is a TEST!
</div>
<div class="clearfix"></div>

test.js:

"use strict";

use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {

    return [0,1,2,3,4,5];

});

and this is the resulting html

<div class="test">    
<div>
    <script type="text/javascript">
        var test = [0,1,2,3,4,5];       
    </script>
    This is a TEST!
</div>
<div class="clearfix"></div>
</div>

Upvotes: 0

Trevor Clarke
Trevor Clarke

Reputation: 1478

I suggest if you want to put variables into the array you just use the following (and stick with purely javascript:

   <div data-sly-use.test="myfile.js">

   <script type='text/javascript'>    

    var a = myArray[n];

   </script>

</div>

Where n is equal to the object number in the array that you want to return the value of.

This way you have no need to edit the javascript file and it makes everything much more simple!

Upvotes: 0

Related Questions