Question

I have a multiple select list item with id “genres”. In my code, I get the value of “genres”, split it, and then iterate through and adds each value to another array. But for some reason, it’s adding an extra entry. Here’s my code:

if ($("#genres").val()!=null) {
    var genres = $("#genres").val().toString().split(",");
    for (var i in genres) {
        model.TitleGenres.push({ GenreId: genres[i] });
    }
}

The variable model.TitleGenres is initialized as [];

When I debug this in Firebug, the values I get are:

genres: [ "6", "1770" ]

At the end of the loop, I get:

model.TitleGenres: [Object { GenreId="6"}, Object { GenreId="1770"}, Object { GenreId=function()}]

I have no idea why there is an extra entry with GenreId=function(), can anybody explain why that is and how to eliminate it?

Answer 1

Do not iterate over (numerical indexed) arrays in JS with for in.

Use for (var i = 0, len = array.length; i < len; i++) { ... }