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!

Answer 1

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

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

Answer 2

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

• mishap: thank you. Any simple example or article that I could refer to ? Thanks,

Answer 3

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