Access javascript variable in template loop

Question

I am 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 was declared in javascript and I can’t access it inside the expression where I get the model value.

Answer 1

That can’t be done.

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

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

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

---

Edit

Based 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
              });
}

Answer 2

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

Something like that:

@{
   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 on javascript just assign the array for the variable.

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

Answer 3

Gentlemen, unfortunately none of the answers worked at first, but they helped and helped a lot to arrive at the solution!
I believe that the problem was basically some kind of incompatibility between the type of variable array of Razor with javascript, so I had to pass the data manually.
The code should be 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, it turns out I can only control the index of model using razor, then I use the variable i of the loop for that I created inside Razor @{} to control the indexes, and inside the loop I can access the variable data javascript created using @: and controlling the index of such an array with a javascript variable indexJS.
I hope this will also help someone else in the future. And thank you very much for all the help!

Answer 4

I solved with the help of another post !!

For any Model in your project, for example

@model IEnumerable<ProjetoNamespace.Models.SeuModelo>

To access such a list one must 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, guys, I hope to help someone !