Cannot iterate a list in javascript

Question

    <script type="text/javascript">
        window.onload = function () {
            for (var i=0;i<@Model.listsinfo.Count;i++)
            {
                $('#work').append($('<div class="col-md-3" id="temp"><label for="text1">'+ '@Model.listsinfo[i].Label' +'</label></div><div class="col-md-3"> <input type="text" placeholder="Alerts" class="form-control" id="text1"> </div>'));
            }
       }
   </script>

In the above code, I am passing a list from my controller and trying to iterate it. But @Model.listsinfo[i].Label is not working and the error says 'i' does not exist in the current context. I am able to access the list value by giving index values @Model.listsinfo[0].Label but iterations are not working. Any help is appreciated.

Your `@Model.listsinfo` is located on server and your loop - on client — Flying, Oct 20 '17 at 09:19
@CRA try `console.log(@Model.listsinfo.Count)` and if the count is showing inside the function — Niladri, Oct 20 '17 at 09:22
JS variable can't be used to mention `@Model.listsinfo` array index - they're both different (server-side vs client-side processing). You need to insert `@Model.listinfo` into JS array & iterate from there. — Tetsuya Yamamoto, Oct 20 '17 at 09:23
@TetsuyaYamamoto there is a better in built way to iterate them in razor using foreach — Niladri, Oct 20 '17 at 09:24
@Niladri - It is a string value so using single quotes. (also tried removing them, not working :( ). Also the Count is working fine. I am facing issues in iteration. Thanks for the comments :) — CRA, Oct 20 '17 at 09:32
Razor works on the server to generate some text. When this generating is done, this text is sent to the browser where it is interpreted as HTML+Javascript. So Razor and Javascript run at very different times and cannot interact. — Hans Keﬆing, Oct 20 '17 at 10:09
Why use a Javascript event to generate HTML instead of letting Razor generate that HTML for you? — Hans Keﬆing, Oct 20 '17 at 10:11

score 2 · Answer 1 · answered Oct 20 '17 at 09:36

You can use Json.Encode with Html.Raw and assign it to a JavaScript array, then iterate the contents from there:

<script type="text/javascript">
    window.onload = function () {
            var array = @Html.Raw(Json.Encode(@Model.listsinfo));

            for (var i = 0; i < array.length; i++)
            {
                $('#work').append($('<div class="col-md-3" id="temp"><label for="text1">'+ array[i].Label +'</label></div><div class="col-md-3"> <input type="text" placeholder="Alerts" class="form-control" id="text1"> </div>'));
            }
    }
</script>

Note that Model.listinfo processed at server-side and iteration occurs in client-side, so you need to convert viewmodel array to JS array first, then you can assign it to append method.

Similar issues:

MVC: Iterating a Viewbag array in javascript

jQuery: How to traverse / Iterate over a list of object

You can consider to accept any answer that best solving your problem rather than saying "thanks", there's no obligation to do so. — Tetsuya Yamamoto, Oct 20 '17 at 10:06

Cannot iterate a list in javascript

1 Answers1