Access javascript variable in loop with model

I’m creating an Asp.Net MVC project and found a problem in View.
See the code:

<script>
var data = [];

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

Well, what I need is simple! Instead of passing a fixed index (in case 0), I need to pass the value of i , but it has been declared in javascript and I can not access it within the expression where I get the value of the 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>

Well, I just happen to be able to control index of model using razor , so I use the i variable of the for loop that I created inside the @{} to control the indexes, and there within the loop I can access the variable data created in javascript using @: and controlling the index of such array with a variable in javascript indexJS .
Home
I hope this helps someone else in the future as well. And thank you so much for all the help!

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!