Two-dimensional Array Loop Not Displaying

Question

I'm encountering a small issue I think. I'm doing a two-dimensional array consisting of 3 genres with each genre as an array of movies. However, the Categories[0].length; isn't letting the code to display...? I tried to take off [0] ... still not working, and I'm not receiving any error message from google console? Any Ideas? Thanks!

             document.write("<tr>");
             for (var i = 0; i < Categories[0].length; i++)
             {
                for (var j = 0; j < Categories.length; j++)
                {
             document.write("<td class='movietd'>");
                              Categories[i][j].display();
             document.write("</td>");

Bellow is the full script:

function Movie(title, genre, rating, price, img) {
    this.title = title;
    this.genre = genre;
    this.rating = rating;
    this.price = price;
    this.image = img;
        this.display = displayMovies;
};

    function displayMovies(Infomovie) {
        document.write("<blockquote class='Informovieblock'><h3 class='infomoviett'>Title:</h3><p class='Informovie'>" + Infomovie.title + "</p><br>");
        document.write("<h3 class='infomoviett'>Genre:</h3><p class='Informovie'>" + Infomovie.genre + "</p><br>");
        document.write("<h3 class='infomoviett'>Rating:</h3><p class='Informovie'>" + Infomovie.rating + "</p><br>");
        document.write("<h3 class='infomoviett'>Price:</h3><p class='Informovie'>" + Infomovie.price + "</p></blockquote><br>");
        document.write("<span><IMG float:'center' SRC='" + Infomovie.image + "' style='width:138px; height:158px;'>" + "<BR><BR>");
    };

    var Moviesgenre = Array("Action", "Fiction", "Animation");
    var action = Array(3);
    var fiction = Array(3) ;
    var animation = Array(3);
    //spacer Arrays    
    var Categories = new Movie(action, fiction, animation);
                 action [0] = new Movie("Avengers the age of Ultron", "Action", "8.0/10.0", "$7.50", "Labs_Images/Avg_Ultron.jpg");
                 action [1] = new Movie("Mission Impossible: Rogue Nation", "Action", "7.5/10.0", "$8.99", "Labs_Images/Avg_Ultron.jpg");
                 action [2] = new Movie("Spectre", "Action", "7.1/10.0", "$9.99", "Labs_Images/Avg_Ultron.jpg");
        //spacer ScienceFiction
                 fiction [0] = new Movie("Mad Max: Fury Road",  "Fiction", "8.2/10.0", "$8.99", "Labs_Images/MM_road.jpg");
                 fiction [1] = new Movie("Jurassic World", "Fiction", "7.1/10.0", "$7.59", "Labs_Images/Avg_Ultron.jpg");
                 fiction [2] = new Movie("Pixels", "Fiction", "5.7/10.0", "$7.00", "Labs_Images/Avg_Ultron.jpg");
         //spacer Animation
                 animation [0] = new Movie("Inside Out", "Animation", "8.4/10.0", "$8.70", "Labs_Images/Avg_Ultron.jpg");
                 animation [1] = new Movie("Minions", "  Animation ", "6.5/10.0", "$6.50", "Labs_Images/Avg_Ultron.jpg");
                 animation [2] = new Movie("Avengers the age of Ultron", "Animation", "8.0/10.0", "$9.99", "Labs_Images/Avg_Ultron.jpg");
        //spacer Doc.write
                 document.write("<table class='movietab'>");
                 document.write(" <tbody class='table-hover'>");
                 document.write(" <tr>");
                 document.write("<th class='movieth'><h3>" + Moviesgenre[0] +"</h3></th>");
                 document.write("<th class='movieth'><h3>" + Moviesgenre[1] + "</h3></th>");
                 document.write("<th class='movieth'><h3>" + Moviesgenre[2] + "</h3></th>");
                 document.write(" </tr>");
                 document.write("<tr>");
                 for (var i = 0; i < Categories[0].length; i++)
                 {
                    for (var j = 0; j < Categories.length; j++)
                    {
                 document.write("<td class='movietd'>");
                                  Categories[i][j].display();
                 document.write("</td>");
                 }
              document.write("</tr>");
              }
                document.write(" </tbody>");
              document.write("</table>");

Answer 1

I'm gonna try to list all your errors and maybe you will be able to fix your script.

• First of all please don't use document.write is a horrible practice.
• Your Movie constructor doesn't have any displayMovies define, so will throw an error
• You should use Array literals instead of the Array constructor
• You can't create the Categories object before populating your action , fiction , and animation arrays, you have to create it after or your object will be full of undefine s
• You shouldn't name your Categories object with uppercase 'C'
• Categories is an object created by the Movie constructor, is not an Array, so you can't access its elements using Categories[0]

Answer 2

There are a lot of issues with this code, so I just took a crack at cleaning it up, trying to guess what you are going for, and here is what I came up with :

function Movie(title, genre, rating, price, img) {
    this.title = title;
    this.genre = genre;
    this.rating = rating;
    this.price = price;
    this.image = img;
    this.display = function(Infomovie){
        document.write("<blockquote class='Informovieblock'><h3 class='infomoviett'>Title:</h3><p class='Informovie'>" + Infomovie.title + "</p><br>");
        document.write("<h3 class='infomoviett'>Genre:</h3><p class='Informovie'>" + Infomovie.genre + "</p><br>");
        document.write("<h3 class='infomoviett'>Rating:</h3><p class='Informovie'>" + Infomovie.rating + "</p><br>");
        document.write("<h3 class='infomoviett'>Price:</h3><p class='Informovie'>" + Infomovie.price + "</p></blockquote><br>");
        document.write("<span><IMG float:'center' SRC='" + Infomovie.image + "' style='width:138px; height:158px;'>" + "<BR><BR>");
    }
}
var Categories = {
    action:[],
    fiction:[],
    animation:[]
};
Categories.action.push(new Movie("Avengers the age of Ultron", "Action", "8.0/10.0", "$7.50", "Labs_Images/Avg_Ultron.jpg"));
Categories.action.push(new Movie("Mission Impossible: Rogue Nation", "Action", "7.5/10.0", "$8.99", "Labs_Images/Avg_Ultron.jpg"));
Categories.action.push(new Movie("Spectre", "Action", "7.1/10.0", "$9.99", "Labs_Images/Avg_Ultron.jpg"));

//spacer ScienceFiction
Categories.fiction.push(new Movie("Mad Max: Fury Road",  "Fiction", "8.2/10.0", "$8.99", "Labs_Images/MM_road.jpg"));
Categories.fiction.push(new Movie("Jurassic World", "Fiction", "7.1/10.0", "$7.59", "Labs_Images/Avg_Ultron.jpg"));
Categories.fiction.push(new Movie("Pixels", "Fiction", "5.7/10.0", "$7.00", "Labs_Images/Avg_Ultron.jpg"));

//spacer Animation
Categories.animation.push(new Movie("Inside Out", "Animation", "8.4/10.0", "$8.70", "Labs_Images/Avg_Ultron.jpg"));
Categories.animation.push(new Movie("Minions", "  Animation ", "6.5/10.0", "$6.50", "Labs_Images/Avg_Ultron.jpg"));
Categories.animation.push(new Movie("Avengers the age of Ultron", "Animation", "8.0/10.0", "$9.99", "Labs_Images/Avg_Ultron.jpg"));

//spacer Doc.write
document.write("<table class='movietab'>");
document.write("<tbody class='table-hover'>");
document.write("<tr>");
for(var category in Categories)
{
    if(!Categories.hasOwnProperty(category))continue;
    document.write("<th class='movieth'><h3>" + category.charAt(0).toUpperCase() + category.substring(1) +"</h3></th>");
}
document.write("</tr>");
document.write("<tr>");
for(var category in Categories)
{
    if(!Categories.hasOwnProperty(category))continue;
    document.write("<td class='movietd'>");
    for (var movie in Categories[category])
    {
        Categories[category][movie].display(Categories[category][movie]);
    }
    document.write("</td>");
}
document.write("</tr>");
document.write("</tbody>");
document.write("</table>");

Fiddle: http://jsfiddle.net/trex005/rd3cqvv6/ (does not allow document.write , so I used a div instead)