How to pass a JavaScript array to Apex controller

Question

I am trying to pass a Javascript array to my apex controller. I know you can pass a string from Javascript through the use of hidden input field and apex action function (and I have used it in the past) but trying a similar thing for arrays did not work. E.g

<apex:page controller="MyController" id = "MyPage">
    <apex:form id="myForm">
        <button type="button" id="B" onclick = "setHidden()">Set Array!</button>
        <apex:inputHidden value="{!StringArr}" id="myHiddenField"/>
        <apex:actionFunction name="passArryToCon" action="{!MyConMethod}" rerender="myForm"/>
    </apex:form>
    <script type="text/javascript">
        j$ = jQuery.noConflict();
        function setHidden() {
           var StrArr = ['product 1', 'product 2', 'product 3'];
           document.getElementById('{!$Component.MyPage.myForm.myHiddenField}').value = (StrArr); //**masterpagefullwidth component id** 
           passArryToCon();
    }     
    </script>
</apex:page>

My Controller

public with sharing class MyController {
    public List<string> StringArr {get; set;}
    public PageReference MyConMethod() {
        system.debug('Passed in value: '+StringArr);
        return null;
    }
}

Could someone suggest a way to get this working? Thanks.

Answer 1

Passing an array natively wouldn't be easy, if it is even possible. Personally, I'd convert the array to JSON, then on the controller side, use JSON to turn it back to an array. You could also use page parameters, such as with an action function, but you'd ask have to convey from a string to an array.

Answer 2

This can be achieved without a @RemoteAction if you want to stick to stateful methods by using apex:actionFunction. If you were not using primitives in your array, you would need to convert to/from JSON.

<apex:form>
    <apex:actionFunction name="afConMethod" action="{!MyConMethod}">
        <apex:param value="" name="array" assignTo="{!StringArr}" />
    </apex:actionFunction>
</apex:form>
<script type="text/javascript">
    function setHidden() {
       var StrArr = ['product 1', 'product 2', 'product 3'];
       afConMethod(StrArr);
    }     
</script>

Answer 3

In addition to my previous suggestion, Here is what I propose coding wise....

In Visualforce:

<apex:actionFunction name="applyFltr" action="{!loadProjects}">
<apex:param name="countries" assignTo="{!countries}" value="" /></apex:actionFunction>

In Javascript:

var countries = []; //fill this javascript array by some sort of javascript processings.
$('#countryCheck').each(function() {
if ($(this).is(":checked") == true) {
  countries.push($(this).val());
}
});

$(document).ready(function () { 
jq('#applyFilter').on('click', function() {
    applyFltr(countries.toString()); //this will call the actionFunction method from javascript, one of the parameters is a converted string format of javascript array.
});    
});

In Apex Controller:

public with sharing controller {
public String countries{get;set;} //String formatted array which we will receive from VF page. 
public String[] countryList{get;set;} //To convert into the list from the string formatted input.
public constructor(){
    countryList = new list<String>();
}
public void loadProjects() {
    countryList = convertStrToList(countries);
}
public String[] convertStrToList(string str) {
    String[] listToReturn = new List<String>();
    if(String.isNotBlank(str)) {
        for(String eachStr : str.split(',')) {
            listToReturn.add(eachStr);
        }
    }
    return listToReturn;
}}

Answer 4

One option would be to use Javascript Remoting. Instead of passing the array to a variable, you could just call an apex method using javascript remoting, and pass the array as a parameter.

Answer 5

I would suggest to convert the javascript array to string from the front end using JS_ARRAY.toString() and send the parameter via string and catch it via string property and process this input via a comma(,) delimiter.