Iterating through IEnumerable Model in JavaScript

Question

I have an IEnumerable<> of Car(here it wont let me use angle brackets properly) model used in my view : and in my JavaScript I have to create an array of object corresponding to object in my model. I have trouble iterating through my model in JavaScript If I use razor, the javascript code is not working:

<script type="text/javascript">

var carsArray = new Array();     

@foreach (var item in Model)
{
    //add the and item to carsArray object
}

//OR
for(i=0;i<@Model.Count();i++)
{
    alert(@Model.ElementAt(i).Title);

//Error: The name 'i' does not exist in the current context

 //add to array

}

</script>

Thank you!

score 4 · Answer 1 · answered Apr 02 '12 at 16:31

4

Did you try wrapping the contents in <text> tags?

var carsArray = new Array();     

@foreach (var item in Model)
{
    <text>carsArray.push("@item.Property")</text>
}

answered Apr 02 '12 at 16:31

jessegavin

74,067
28
136
164

score 3 · Accepted Answer · edited Apr 25 '13 at 16:28

3

You are mixing server side and client side code.

If you want to spit out client side code on the server you can.

But best is to serialise your model data into JSON and put it on the client.

Rough example:

Update

@{
   var js = new JavaScriptSerializer();
}

myJavascriptObject.Models = @js.Serialize(myModels);

edited Apr 25 '13 at 16:28

jessegavin

74,067
28
136
164

answered Apr 02 '12 at 16:32

Aliostad

80,612
21
160
208

thank you. Any simple example or article that I could refer to ? Thanks, – mishap Apr 02 '12 at 16:35

score 1 · Answer 3 · answered Jun 14 '21 at 17:15

another way to do this is to just convert the server model to javascript, and then iterate it.

you can convert it like so:

var model = @Html.Raw(Json.Encode(Model));

this method worked for me. solution taken from another stackoverflow answer:

Accessing MVC's model property from Javascript

Iterating through IEnumerable Model in JavaScript

3 Answers3

Update