How to pass a Javascript array to an Apex controller?

Question

I have the following problem, I want to assign an array of javascript to a list of the apex controller. I have to update 3 list of the saleforce page with a "save" button and pass to the controller the list of the page to be able to update

Visualforce page

<apex:page controller="Controller">
    <apex:form >

        <!-- Agrego librerias de jqeury-ui  -->
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

        <!-- Agrego librerias de jqeury APEX IN AJAX  -->   
        <script src="/soap/ajax/42.0/connection.js" type="text/javascript"></script>
        <script src="/soap/ajax/42.0/apex.js" type="text/javascript"></script>

        <!-- Script de la funcion para itercambiar cuentas  -->

        <!-- Script de la funcion para itercambiar cuentas  -->

        <!-- Script de la funcion para itercambiar cuentas  -->

        <!-- Script de la funcion para itercambiar cuentas  -->

        <script>
            $( function() {
                //varibales globales

                var arrLevelUno = []
                var arrLevelDos = []
                var arrLevelTres = []
                var leveluno = document.querySelectorAll(".level1")
                var leveldos = document.querySelectorAll(".level2")
                var leveltres = document.querySelectorAll(".level3")

                //uso JqueriUI para podes arrastrar las listas
                $( "#sortable1, #sortable2, #sortable3" ).sortable({
                    connectWith: ".connectedSortable"
                }).disableSelection();

                $("#btnmar").click(cargoListas);  

                //recorro todas las listas guardandolas en arreglos  
                function cargoListas(){
                    leveluno.forEach(lista => {
                        arrLevelUno.push(lista.textContent)
                    });
                    leveldos.forEach(lista => {
                        arrLevelDos.push(lista.textContent) 
                    });
                    leveltres.forEach(lista => {
                        arrLevelTres.push(lista.textContent)
                    });

                    var a = devuelvoLista1()
                    var b = devuelvoLista2()
                    var c = devuelvoLista3()
                    console.dir(a)
                    console.dir(b)
                    console.dir(c)
                    //limpio los arreglos 
                    limpiarArr()                                                        
                }

                function limpiarArr(){
                    arrLevelUno = []
                    arrLevelDos = []
                    arrLevelTres = []
                }

                function devuelvoLista1(){
                    return arrLevelUno
                }

                function devuelvoLista2(){
                    return arrLevelDos
                }

                function devuelvoLista3(){
                    return arrLevelTres
                }

            });
        </script>

        <apex:pageBlock title="Intercambiar Cuentas">
            <button id="btnmar">boton javascript</button>
            <apex:pageBlock title="Nivel 1">
                <ul id="sortable1" class="connectedSortable">
                    <apex:repeat var="account" value="{! Accountslv1}">
                        <li class="level1">{!account.name} - {!account.NIVEL__c}</li>
                    </apex:repeat>
                </ul>
            </apex:pageBlock>

            <apex:pageBlock title="nivel 2">
                <ul id="sortable2" class="connectedSortable">
                    <apex:repeat var="account" value="{! Accountslv2}">
                        <li class="level2">{!account.name} - {!account.NIVEL__c}</li>
                    </apex:repeat>
                </ul>
            </apex:pageBlock>

            <apex:pageBlock title="nivel 3">   
                <ul id="sortable3" class="connectedSortable">
                    <apex:repeat var="account" value="{! Accountslv3}">
                        <li class="level3">{!account.name} - {!account.NIVEL__c}</li>
                    </apex:repeat>
                </ul>
            </apex:pageBlock>
            <apex:pageBlockButtons>
                <apex:commandButton id="btnmar" value="Guardar" onclick="cargoListas();" action="{!actualizar}">

                    <apex:param name="param1" value="a" assignTo="{!accounts1}"/>
                    <apex:param name="param2" value="b" assignTo="{!accounts2}"/>
                    <apex:param name="param3" value="c" assignTo="{!accounts3}"/>
                </apex:commandButton>
            </apex:pageBlockButtons>
        </apex:pageBlock> 
    </apex:form>   
</apex:page>

controller

public with sharing class Controller {
    public List<Account> accounts1 {get;set;}
    public List<Account> accounts2 {get;set;}
    public List<Account> accounts3 {get;set;}

    //Métodos que devuelven una lista de cuentas según el nivel

    public List<Account> getAccountslv1 (){
        accounts1 = [SELECT name, NIVEL__c from Account WHERE NIVEL__c IN ('nivel1')];
        return accounts1;
    }

    public List<Account> getAccountslv2 (){
        accounts2 = [SELECT name, NIVEL__c from Account WHERE NIVEL__c IN ('nivel2')];
        return accounts2;
    }

    public List<Account> getAccountslv3 (){
        accounts3 = [SELECT name, NIVEL__c from Account WHERE NIVEL__c IN ('nivel3')];
        return accounts3;
    } 

    //Métodos que actializan las listas pasandole una lista de 'Account' con la informacion obtenida de la lista de la pagina apex
    public void actioncontroller1(){
        //accounts1 = Apexpages.currentPage().getParameters().get('a');
        for(Account a : accounts1){
            a.NIVEL__c='nivel1';
            upsert a;
        }
    }

    public void actioncontroller2(){
        for(Account b : accounts2){
            b.NIVEL__c='nivel2';
            upsert b;
        }
    }

    public void actioncontroller3(){
        for(Account c : accounts3){
            c.NIVEL__c='nivel3';
            upsert c;
        }
    } 

    public void actualizar(){
        for(Account a : accounts1){
            a.NIVEL__c='nivel1';
            upsert a;
        }

        for(Account b : accounts2){
            b.NIVEL__c='nivel2';
            upsert b;
        }

        for(Account c : accounts3){
            c.NIVEL__c='nivel3';
            upsert c;
        }  
    }
}

Answer 1

You can create an apex:inputHidden field and assign the javascript array to inputHidden value. Actually when you pass the array its a String with comma(,) separated values so you need to split that string on server side as per the logic.

Below is the sample code snippet you can try

<apex:inputHidden id="theHiddenInputId" value="{!setIdString}"/>

Javascript + JQoeru code to assign the array to inputHidden field. You can do this onClick of Command button call a javascript function and add below line of code into that function

var leadIdsArr = [];
$("[id$=theHiddenInputId]").val(leadIdsArr);

Apex code to get the inputHidden value and slipt into List

public String setIdString{get;set;}

List<String> idList = setIdString.split(',');