1

Necesito un programa:

  • En el que defino un array con 3 objetos.
  • Cada uno de estos objetos ha de tener 3 propiedades.
  • Cada objeto con sus propiedades se debe mostrar en una línea diferente (usando un bucle for).

De momento he intentado 2 cosas:

El primer intento:

<!DOCTYPE html>
<html lang="es">

<head>
  <title>LMI. Exercicis 5.5</title>
  <meta charset="utf-8" />

  <p id="demo"></p>
</head>

<body>

  <script>
    var alumnos = [{
      nombre: "María",
      apellido: "García",
      edad: "18"
    }, {
      nombre: "Edgar",
      apellido: "Gómez",
      edad: "19"
    }, {
      nombre: "Greta",
      apellido: "López",
      edad: "18"
    }]

    for (alumnos = 0; alumnos < 9; alumnos++) {
      document.getElementById("demo").innerHTML = "Nombre: " + alumnos.nombre + "</br> Apellido: " + alumnos.apellido + "</br> Edad: " + alumnos.edad;
    }
  </script>

</body>

</html>

El segundo intento:

<!DOCTYPE html>
<html lang="es">

<head>
  <title>LMI. Exercicis 5.5</title>
  <meta charset="utf-8" />

  <p id="demo"></p>
</head>

<body>
  <script>
    var alumnos = [{
      "María",
      "García",
      "18"
    }, {
      "Edgar",
      "Gómez",
      "19"
    }, {
      "Greta",
      "López",
      "18"
    }]
    var posicion;

    for (posicion = 0; posicion < 9; posicion++) {
      document.write("Nombre: " + alumnos[posicion] + "</br> Apellido: " + alumnos[posicion] + "</br> Edad: " + alumnos[posicion]);

    }
  </script>
</body>

</html>

Gracias por la ayuda de antemano.

Saludos.

3 respuestas 3

2

En el primer intento solo tenes que hacer las siguiente correcciones:

  • <p id="demo"></p> debe ir dentro del <body>.
  • Utilizar correctamente el for para iterar el arreglo alumnos.
  • Para acceder a los objetos dentro de un arreglo es necesario indicar la posición.
  • Para agregar contenido a una variable es necesario "concatenar" (eg +=), de lo contrario siempre vas a pisar el contenido y perder el valor anterior

Ejemplo:

<!DOCTYPE html>
<html lang="es">

<head>
  <title>LMI. Exercicis 5.5</title>
  <meta charset="utf-8" />
</head>

<body>
  <!-- Mover tag al body -->
  <p id="demo"></p>
  <script>
    var alumnos = [{
      nombre: "María",
      apellido: "García",
      edad: "18"
    }, {
      nombre: "Edgar",
      apellido: "Gómez",
      edad: "19"
    }, {
      nombre: "Greta",
      apellido: "López",
      edad: "18"
    }]

    // Uso correcto de "for"
    for (let i = 0; i < alumnos.length; i++) {
    
      // Acceder al objeto del arreglo en la posicion "i"
      let html = "Nombre: " + alumnos[i].nombre + 
        "<br> Apellido: " + alumnos[i].apellido + 
        "<br> Edad: " + alumnos[i].edad +
        "<br><br>";
        
      // Concatenar (+=)
      document.getElementById("demo").innerHTML += html;
    }
  </script>

</body>

</html>

PD: En el segundo intento están mal definidos los objetos, lo que provoca una error de sintaxis.

1
  • He modificado un par de cosas pero era lo que estaba buscando. Muchas gracias!! Commented el 8 may. 2020 a las 12:06
2

hice un ejemplo lo mas sencillo posible con el bucle for.

Explicación:

El for recorre cada objeto del array llamado alumnos, dentro hice una variable llamada parrafo con la que creamos un elemento p y despues a ese elemento le añadimos los datos del objeto, por ultimo lo insertamos en el elemento (cambie el elemento p por un div para el ejemplo) div con el id demo.

(Observé que la etiqueta con el id demo estaba dentro de la etiqueta head, ese tipo de elemento siempre debe estar dentro de la etiqueta body)

Ejemplo:

<!DOCTYPE html>
<html lang="es">

<head>
	<title>LMI. Exercicis 5.5</title>
	<meta charset="utf-8" />
</head>

<body>
	<div id="demo"></div>

	<script>
		var alumnos = [{
			nombre: "María",
			apellido: "García",
			edad: "18"
		}, {
			nombre: "Edgar",
			apellido: "Gómez",
			edad: "19"
		}, {
			nombre: "Greta",
			apellido: "López",
			edad: "18"
		}]

		for (alumno of alumnos) {
			let parrafo = document.createElement("p");

			parrafo.innerHTML = "Nombre: " + alumno.nombre + " Apellido: " + alumno.apellido + " Edad: " + alumno.edad;

			document.getElementById("demo").appendChild(parrafo);
		}
	</script>
</body>

</html>

1

Podés hacerlo con reduce(), acá te dejo la documentación

const alumnos = [{
    nombre: "María",
    apellido: "García",
    edad: 18
  },
  {
    nombre: "Edgar",
    apellido: "Gómez",
    edad: 19
  },
  {
    nombre: "Greta",
    apellido: "López",
    edad: 18
  }
]

//con reduce() podemos recorrer cada elemento e indexarlo con un identificador como por ejemplo el nombre y apellido y así buscarlo facilmente.

const listaDeAlumnos = alumnos.reduce((acum, elem) => ({
  //Devuelvo un objeto el cual contiene la copia del acumulador
  ...acum,
  //Entre corchetes creo una nueva 'key' que es con la que puedo identificar mi nuevo arreglo, y al lado dejo el elemento 'elem', u objeto.
  [`${elem.nombre} ${elem.apellido}`]: elem

}), {})

//Usamos Object.keys() para obtener un array con el identificador o 'keys' que creamos en la listaDeAlumnos

const ids = Object.keys(listaDeAlumnos)

//Procedemos a iterar los ids de la lista con el bucle for

for (let i = 0; i < alumnos.length; i++) {
  console.log(`${listaDeAlumnos[ids[i]].nombre} ${listaDeAlumnos[ids[i]].apellido} ${listaDeAlumnos[ids[i]].edad}`)
}

4
  • Te recomiendo que agregues un ejemplo ejecutable como en las otras respuestas Commented el 25 ene. 2023 a las 18:28
  • Gracias! lo intenté pero no le encontré la vuelta... saabés cómo se hace? Ahora le dedico más tiempo a ver si puedo ponerle el demo. Commented el 26 ene. 2023 a las 13:47
  • Veo que pudiste, excelente! Un ejemplo ejecutable suele agregar valor a tu respuesta Commented el 26 ene. 2023 a las 15:49
  • 1
    Gracias! nada más era cuestión de leer detenidamente las instrucciones. Commented el 26 ene. 2023 a las 17:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.