asp.net mvc - how can you loop through model data in javascript

Question

I am tring to add data to a listbox in javascript, however the string building syntax has me stumped:

var yourobject = '<%=Model.Inserts['+ i + ']%>';

causes an error: "Too many characters in character literal"

All of the code:

var mlb = cm.createListBox('mylistbox', {
                        title: 'My list box',
                        onselect: function(v) {
                                tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                            }
                        });


                        for (var i = 0; i < '<%=Model.Inserts.Count() %>'; i++) {
                            var yourobject = '<%=Model.Inserts['+ i + ']%>';
                            mlb.add(yourobject, i);
                        }

See new answer here http://stackoverflow.com/questions/23781034/razor-mvc-populating-javascript-array-with-model-array — Andrew Day, Nov 27 '15 at 21:13

score 13 · Answer 1 · answered Jan 14 '13 at 15:04

I know this is an old question, but the answers are outdated, as it is now possible.

This can be done in the razor syntax using @: on the start of the lines to run in javascript (escape from c#).

My Model.xValues is a List<String> passed from the controller. and yValues is List<int>

Here is a quick example of how to loop through a model data inside a javascript function.

<script type="text/javascript">
   function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', '@Model.LabelName');
        data.addColumn('number', '@Model.ValueName');

       @for(int i = 0; i < Model.xValues.Count; i ++)
       {
           @: data.addRow(['@Model.xValues.ElementAt(i)', @Model.yValues.ElementAt(i)]);
       }

       ... etc

</script>

Thank you for the very elegant solution. I was even able to do something like this: https://gist.github.com/saad749/db606466725cff8f96b5a766da4a4dad — Segmentation Fault, Feb 02 '17 at 05:55

score 3 · Accepted Answer · answered Jan 04 '10 at 22:51

3

You can't mix code that runs on the server (the transliteration of the <% %> block) with that the runs on the client (the for loop) in that way. Do the iteration in C# rather than in javascript and create a javascript object in a string that you can simply assign.

<%  var aray = "[";
    foreach (var insert in Model.Inserts) {
        aray += "'" + insert + "',";
    }
    aray = aray.TrimEnd(",") + "]";
 %>
    var mlb = <% aray %>;

answered Jan 04 '10 at 22:51

tvanfosson

524,688
99
697
795

Your advise is cool but I see question has 'in javascript' section, So I think that is better to change question title. – QMaster Aug 25 '16 at 11:48

Noah Heldman · Answer 3 · 2010-01-04T22:59:09.537

2

You will need to loop through your Model object in a .NET code block, and assign those values to your JavaScript variables in that loop:

var count = 0, yourobject; // This is JavaScript

<% for (var i = 0; i < Model.Inserts.Count(); i++) { %> // This is .NET 
       yourobject = '<%= Model.Inserts[i] %>'; // This is JS AND .NET
       mlb.add(yourobject, count++); // This is JavaScript
<% } %>

edited Jan 04 '10 at 22:59

answered Jan 04 '10 at 22:50

Noah Heldman

6,724
3
40
40

Wouldn't this output multiple `var yourobject...` statements? That would be a javascript error. I think you'd need to declare it outside the loop as well and simply reuse it inside the loop. – tvanfosson Jan 04 '10 at 22:56

asp.net mvc - how can you loop through model data in javascript

3 Answers3

Linked