title: Get array values from node property with javascript
body: <p>I found this <a href="https://stackoverflow.com/questions/14460843/how-to-get-array-values-of-a-node-property-in-jcr">post</a>, but I need the equivalent in javascript.
  I have a selectbox inside a multifield containing options with string array values.</p>
  
  <p><strong>JCR Structure</strong></p>
  
  <pre><code>&lt;multiField
      fieldLabel="Fields"
      jcr:primaryType="nt:unstructured"
      cardinality="5"
      sling:resourceType="/apps/.../multifield"
      buttonName="Add Field"
      slideStyle="border"&gt;
      &lt;field
          jcr:primaryType="nt:unstructured"
          name="./fields"
          sling:resourceType="granite/ui/components/foundation/form/fieldset"&gt;
          &lt;layout
              jcr:primaryType="nt:unstructured"
              sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/&gt;
          &lt;items jcr:primaryType="nt:unstructured"&gt;
              &lt;column
                  jcr:primaryType="nt:unstructured"
                  sling:resourceType="granite/ui/components/foundation/container"&gt;
                  &lt;items jcr:primaryType="nt:unstructured"&gt;
                      &lt;selectBox
                          fieldLabel="Select Box"
                          jcr:primaryType="cq:Widget"
                          name="./select"
                          sling:resourceType="granite/ui/components/foundation/form/select"&gt;
                          &lt;items jcr:primaryType="cq:WidgetCollection"&gt;
                              &lt;option1
                                  jcr:primaryType="nt:unstructured"
                                  text="Option 1"
                                  value="['val1':'value 1','val2':'value 2','val3':'value 3']"/&gt;
                              &lt;option2
                                  jcr:primaryType="nt:unstructured"
                                  text="Option 2"
                                  value="['val1':'value 1','val2':'value 2','val3':'value 3']"/&gt;                                                                      
                          &lt;/items&gt;
                      &lt;/selectBox&gt;
                  &lt;/items&gt;
              &lt;/column&gt;
          &lt;/items&gt;
      &lt;/field&gt;
  &lt;/multiField&gt;
  </code></pre>
  
  <p>I loop through the multifield with js</p>
  
  <p><strong>JS File</strong></p>
  
  <pre><code>"use strict";
  use(function() {
      return {
          data: JSON.parse(this.value)
      };
  });
  </code></pre>
  
  <p><strong>HTML File</strong></p>
  
  <pre><code>&lt;div data-sly-list.field="${properties['fields']}" data-sly-unwrap&gt;
     &lt;div data-sly-use.json="${'jsfile.js' @ value=field}" data-sly-unwrap&gt;
          &lt;div data-sly-list.input="${json.data.select}" data-sly-unwrap&gt;
              &lt;div data-sly-list.input="${json.data.inputField}" data-sly-unwrap&gt;
                  &lt;div data-sly-use.attr="${'multivalues.js' @ value=input}" data-sly-unwrap&gt;
                      ${attr.data}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is where I get stuck. I can't seem to loop through the array. I get <code>"[Ljava.lang.String;@6d100000"</code></p>
  
  <p><strong>multivalues.js</strong></p>
  
  <pre><code>"use strict";
  use(function () {
      var attr = this.value.toString();
      return {
          data: JSON.stringify(attr)
      };
  });
  </code></pre>