How can I correctly display my array? Beginner inside

Question

How are you?

Right now, I'm learning Arrays with Javascript. I've done a function to show a content of my array into a HTML file, but I only recive "undefined".

First of all, I tried to modify the code inside of "contenido", but I only received the "character" into the 0 position, like this example: contenido += "<div id=d"+posicion+">Titulo: "+serie.titulo[0]. It returned me "D", of Dexter.

What am I doing wrong?

This is my code.

/*Creating a class to structure the information of a TV show by saving the title, theme, array with the main actors and saving the favorite actor in the array.
*/
class SerieTV {
    constructor (titulo, tematica, actoresPrincipales){
        var arrayActores = new Array();
        this.titulo=titulo;
        this.tematica=tematica;
        this.actores=actoresPrincipales;

/* Adding a function to generate a random favorite actor.
*/    
        this.generaActorFavorito = function(){
            var long = actoresPrincipales.length;
            let calc = Math.floor(Math.random()*(long));
           arrayActores = actoresPrincipales[calc];
           console.log(arrayActores);
        }
        
    }
}
/* Creating 3 series, the 1st with 2 actors, 2nd with 3 and 3rd with 4. Later, adding it to a new array called "total_series."
*/
var show01= new SerieTV('Dexter ',  'Drama ', ['Michael C Hall ' ,'Jennifer Carpenter']);
show01.generaActorFavorito();

var show02 = new SerieTV('Samurai Gourmet' ,  'Cocina' ,  ['Naoto Takenaka' ,'Tetsuji Tamayama' , 'Honami Suzuki '] );
show02.generaActorFavorito();

var show03 = new SerieTV ('Breaking Bad ', 'Drama ', ['Aaron Paul ','Bryan Cranston ', 'RJ Mitte ', 'Anna Gunn ']); 
show03.generaActorFavorito();

console.log("-------------------------");

var total_series = new Array();
total_series.push(show01);
total_series.push(show02);
total_series.push(show03);
console.log(total_series);

console.log("-------------------------");

/* Adding a button on HTML that when clicked, shows the information of all the series within the "total_series" array. 
*/
function muestraArray(){

    let contenido="";

    total_series.forEach(function(serie, posicion){

    contenido += "<div id=d"+posicion+">Titulo: "+serie[0]+"<br> Temática: "+serie[1]+" <br> Actor Favorito: "+serie[3]+" <br> Actores: "+serie[2]+" <br><br>";

    });
    document.getElementById("resultado").innerHTML = contenido;
   

}

Thanks!!

Answer 1

To access members of a class use dot notation syntax.

contenido += "<div id=d"+posicion+">Titulo: "+serie.titulo+"<br> Temática: "+serie.tematica+" <br> Actor Favorito: "+serie.actoresPrincipales+" <br> Actores: "+serie.actores+" <br><br>";

Also, inside the method generaActorFavorito in this statment arrayActores = actoresPrincipales[calc] you're reassigning an array to be a value which makes no sense, you can simply do var arrayActores; instead of var arrayActores = new Array();

Answer 2

Okey, problem solved. I solved that removing the square brackets. Thank you all!!

contenido += "<div id=d"+posicion+">Titulo: "+serie.titulo+"<br> Temática: "+serie.tematica+" <br> Actor Favorito: "+serie.actoresPrincipales+" <br> Actores: "+serie.actores+" <br><br>";