Index out of range in javascript array

Question

I'm trying to create an array in javascript with a list of objects passed to a view as the model, but I'm getting this error: "System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'startIndex')" when trying to open the view. This is my code:

<script language="JavaScript">
(function () {       
    var currentExpression;
    var expressionName;
    var role;
    
    function startup() {
    //Here, the initial expression
        counter = 0;
        exp = Array.from(@Model);

        currentExpression = document.getElementById('expresionImage');
        currentExpression.src = "~/Plugins/Widgets.Expressions/Content/Expressions/sample-expressions/" + exp[counter].ExpressionFileName;
        expressionName = document.getElementById('expressionName');
        expressionName.innerHTML = exp[counter].ExpressionName;
        role = exp[counter].Role;
   
  //==================================
    //Code here...      
   
    $(document).ready(function () {
        $("#AjaxForm").submit(function (e) {
            e.preventDefault();

            // More code...

            $.ajax({
                type: "post",  // Verbo HTTP
                url: "@Url.Action("TakePhoto", "WidgetsExpressions")",
                dataType: "application/Json",
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken: "]').val() },
                data: JSON.stringify(
                    {
                    // Datos / Parámetros
                        ProductId: $("#productId").val(),
                        Role: role, 
                        ExpressionName: expressionName,                           
                    }),
                contentType: "application/Json; charset=utf-8"
                })
                .done(function (result) {                             
                        counter = ++counter;
                       
                        //Cambiamos la expression
                        currentExpression.src = "~/Plugins/Widgets.Expressions/Content/Expressions/sample-expressions/" + exp[counter].ExpressionFileName;
                        expressionName = exp[counter].ExpressionName;
                        role = exp[counter].Role;

                        // Mostramos un mensaje de éxito.
                        //$("#SuccessAlert").show("slow").delay(2000).hide("slow");
                        alert(result.Message);
                    }
                    else{
                    //Aqui va el Alert que indica que no se pudo procesar la foto. La expresion sigue igual.
                    alert(result.Message);
                    }
                })
                // Se ejecuta si se produjo un error.
                .fail(function (xhr, status, error) {
                    // Mostramos un mensaje de error.
                    $("#ErrorAlert").show("slow").delay(2000).hide("slow");
                   
                })
                // Hacer algo siempre, haya sido exitosa o no.
                .always(function () {

                });
            });
        });

    //=====================================
    window.addEventListener('load', startup, false);
})();

Sorry. This can be a silly question, but I´m just starting with javascript and can't figure what is my mistake. Thanks

Answer 1

Thanks for the replies. The problem was that the Model has to be serialized prior to convert it to an array. This is how I solved it:

 var expModel = @Json.Serialize(Model); 
        exp = Array.from(expModel);