Access javascript variable in loop with model

Gentlemen, unfortunately none of the answers worked at first, but they helped and a lot to come up with the solution! Home I think the problem was basically some kind of incompatibility between the razor's array variable type and the javascript, so I had to pass the data manually. Home The code should look like this:

<script>
var indexJS = 0;
var data = [];
@{
    for (int i = 0; i < Model.Count(); i++)
    {
        @:(data[indexJS] = { "source" : '@Model.ElementAtOrDefault(i).Source', "percentage": '@Model.ElementAtOrDefault(i).Percentage' });
        @:(indexJS++);
    }
}
</script>

This can not be done.

The expression @(Model.ElementAtOrDefault(0).Source) has to be evaluated on the server side, before of the html be sent to the browser and thus before of the javascript to be executed.

Since the value of i is dynamic and will only be known when javascript is run in the browser, it is impossible to use the i variable in the expression.

The solution is to convert all model elements to two arrays in javascript out of the loop using for example Model.Select(x => x.Source) and Model.Select(x => x.Percentage) (this can be evaluated server side), and then use the javascript arrays inside the loop.

Edit

Based on in this answer , I think the syntax is as follows:

var elems = [];

@foreach (var elem in Model)
{
    @:elems.push(
              new {
                   source = @elem.Source
                   percentage = @elem.Percentage
              });
}

Try to use the loop using the razor syntax and then assign the value of a array generated to the variable javascript .

Something like this:

@{
   var vetor = new object[Model.Count()];
}

@for (int i = 0; i < Model.Count(); i++)
{
    vetor[i] = new {
                 source = Model.ElementAtOrDefault(i).Source,
                 percentage = Model.ElementAtOrDefault(i).Percentage
               };
}

and then in javascript , just assign the array to the variable.

<script>
    var data = @vetor;
</script>

I solved it with the help of another post !!

For any template in your project, such as

@model IEnumerable<ProjetoNamespace.Models.SeuModelo>

To access such a list you should use:

<script>
   var minhaLista = @Html.Raw(Json.Encode(Model));
   for(var i = 0; i < minhaLista.length; i++){
       var elementoLista = minhaLista[i];
       //acesse os atributos a partir do elemento !
       //elementoLista.<atributo>
   }
</script>

That's it, I hope to help someone!