Arrays de objects en JavaScript

Publicada el por

Veamos un ejemplo donde almacenaremos objets en una array para luego poder recorrerla y mostrar los datos. En definitiva, este artíulo mostrará cómo tratar los Arrays de objects en Javascript.

JavaScript Tutoriales

Ya vimos en el capítulo anterior, Objects en Javascript declaración y acceso, cómo crear los objects y como asignarles datos. En éste, veremos cómo crear un Array de Objects. Vamos por el código.

El código JavaScript

Fijaos que tenemos un Object equipo, que tiene una propiedad llamada plantilla, que será un Array donde iremos almacenando los objects que creamos de jugadores. Mirad el código, donde se incluyen los comentarios:

var equipo = new Object();
var jugador = new Object();
var jugador2 = new Object();
var numjugadores= 0;
var textoMostrar= "";

// Creamos el equipo
equipo.nombre= "Sevilla FC";
equipo.fundacion= "1912";
equipo.estadio= "Sanchez Pizjuan";
equipo.numjugadores= 0;
// Aquí creamos el array en el atributo plantilla del objecto equipo:
equipo.plantilla= new Array();

// Creamos el 1er objecto del tipo jugador, y lo asignamos a una posición del Array plantilla
jugador.nombre= "Ocampos";
jugador.dorsal= "11";
jugador.posicion= "Delantero";
equipo.plantilla[ numjugadores ]= jugador;
numjugadores++;

// Creamos el 2o objecto del tipo jugador, y lo asignamos a una posición del Array plantilla
jugador2.nombre= "Navas";
jugador2.dorsal= "9";
jugador2.posicion= "Lateral";
equipo.plantilla[ numjugadores ]= jugador2;
numjugadores++;

textoMostrar += "<h3>EQUIPO</h3>";
textoMostrar += "<br />Nombre: "+ equipo.nombre;
textoMostrar += "<br />Fundación: "+ equipo.fundacion;
textoMostrar += "<br />Estadio: "+ equipo.estadio;
textoMostrar += "<h3>PLANTILLA</h3>";

// Recorremos toda la tabla plantilla del objeto equipo, para ir mostrando los datos de los jugadores.
for ( var index=0; index < equipo.plantilla.length; index += 1 ){
  textoMostrar += "<br />Jugador: "+ equipo.plantilla[index].nombre;
  textoMostrar += " Dorsal: "+ equipo.plantilla[index].dorsal;
  textoMostrar += " Posición: "+ equipo.plantilla[index].posicion;
}

document.getElementById('consola').innerHTML= textoMostrar;

En definitiva, lo que hacemos es:

  • Creamos objeto ‘equipo’, que contiene un atributo ‘plantilla’ que es un array
  • Creamos objetos jugador.
  • Los vamos añadiendo al Array plantilla.
  • Recorremos el Array para mostrar los datos de los jugadores.

CodePen: Arrays de Objects

Aquí tenemos el código en acción.

See the Pen JavaScript Objects – Array Objects by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Lógicamente, los códigos pueden mejorarse y/o hacerlo diferente. Pero lo realizamos de forma sencilla e incidiendo en la creación de objetos e intentando que se vea claro nuestro objetivo: mostrar los Arrays de objects en JavaScript.

Os invitamos a realizar más pruebas y diferentes maneras de crear objects i arrays. Tener bien estructurados los datos es esencial.

Más información