0

Estoy necesitando recorrer el siguente array:

    var estrenos = []; //array con los 3 estrenos, cada ID del article se corresponde con el INDICE del array
estrenos['ant'] = {
    Titulo : 'El Hombre hormiga',
    Foto : 'ant_man_large.jpg',
    Trailer : 'https://www.youtube.com/v/P8ksX41WyxA',
    Info: 'Dotado con la asombrosa capacidad de reducir su tamaño pero aumentar su fuerza, el experto ladrón Scott Lang deberá abrazar su héroe interior y ayudar a su mentor, el Dr. Hank Pym, a proteger el secreto que se esconde detrás de su espectacular traje de Ant-Man de una nueva generación de imponentes amenazas. Contra obstáculos aparentemente insuperables, Pym y Lang deberán planear y ejecutar un plan que salvará el mundo.',
    Ficha: {
        Genero : 'Ciencia Ficcion',
        Fecha : '16 de julio de 2015',
        Duracion : '110 minutos',
        Clasificacion : 'Mayores 13 años'
    }
}

estrenos['jurassic'] = {
    Titulo : 'Jurassic World',
    Foto : 'jurassic_world_large.jpg',
    Trailer : 'https://www.youtube.com/v/GrUs5FR_eTA',
    Info: 'Veintidós años después de lo ocurrido en Jurassic Park, la isla Nublar ha sido transformada en un parque temático, Jurassic Wold, con versiones domesticadas de algunos de los dinosaurios más conocidos. Cuando todo parece ir a la perfección y ser el negocio del siglo, un nuevo dinosaurio de especie todavía desconocida y que es mucho más inteligente de lo que se pensaba, comienza a causar estragos entre los habitantes del Parque.',
    Ficha: {
        Genero : 'Acción',
        Fecha : '11 de junio de 2015 ',
        Duracion : '110 minutos',
        Clasificacion : 'Mayores 16 años'
    }
}

estrenos['pixels'] = {
    Titulo : 'Pixels',
    Foto : 'pixels_large.jpg',
    Trailer : 'https://www.youtube.com/v/Qh83tSbbV_I',
    Info: 'Unos alienígenas malinterpretan los videojuegos clásicos como una declaración de guerra y deciden atacar la Tierra usando esos juegos como modelos. El Presidente (Kevin James) debe llamar a su mejor amigo de la infancia Sam Brenner (Adam Sandler), quien fuera campeón de videojuegos en los años 80 para que dirija a un equipo de arcaders de la vieja escuela (Peter Dinklage y Josh Gad) que pueda derrotar a los alienígenas y salvar al planeta. A ellos se unirá la teniente Coronel Violet Van Patten (Michelle Monaghan).',
    Ficha: {
        Genero : 'Animación',
        Fecha : '23 de julio de 2015 ',
        Duracion : '90 minutos',
        Clasificacion : 'Apta todo público'
    }
}

Esos datos deben ser recorridos para luego ser mostrados mediante el manejo de DOM en la siguiente estructura HTML:

<!-- este es el codigo que tenes que generar al hacer click en alguna película -->
<!-- Obviamente los datos a mostrar en cada lugar vienen de su respectivo object -->
<div id="modal">
    <div>
        <div><a href="#">Cerrar</a></div>
        <h2>TITULO_PELICULA</h2>
        <div><img src="fotos/FOTO_PELICULA" /></div>
        <p>ADENTRO DE ESTE PARRAFO VA LA INFO DE LA PELICULA CLICKEADA</p>
        <object data="URL_DEL_VIDEO" width="350" height="200"></object>
        <ul>
            <li>Titulo: TITULO_PELICULA</li>
            <li>Estreno: FECHA</li>
            <li>Genero: GENERO</li>
            <li>Clasificacion: CLASIFICACION</li>
        </ul>
    </div>
</div>

Todo esto sucede cuando se le hace click a 3 articles distintos que llamo desde DOM. Dato de color: Cada article tiene como id el mismo nombre que cada posicion del array. Estoy teniendo problemas para recorrerlo correctamente, alguien me podra ayudar? Gracias!

3
  • Las claves por las que buscar en un Array deben ser números. Lo que buscas es generar un objeto. el 14 nov. 2016 a las 21:40
  • El codigo que pegue ya esta dado, el array es asi y tiene como posicion asociativa el mismo nombre que el id de cada article al que se le hace click para hacer mas simple teoricamente. No busco generar un objeto sino recorrer esas posiciones asociativas para insertar la informacion correspondiente en la estructura html que se me dio ( la cual se genera por cada article)
    – Cecilia
    el 14 nov. 2016 a las 21:44
  • 1
    @JoseHermosillaRodrigo los índices de un array también pueden ser strings, ya que los índices se agregan al prototipo del array (que es un objeto al final); sin embargo, estos índices no serán tomados en cuenta al iterar el array ni en propiedades como length.
    – gugadev
    el 30 abr. 2017 a las 11:06

2 respuestas 2

1

Podría usar Object.Keys para obtener un Arreglo para posteriormente iterarlo con un forEach

Object.keys(estrenos).forEach(function(e) {
console.log(e); /* Key del Array*/
console.log(this[e].Foto);/* Atributo*/
console.log(this[e].Ficha['Fecha']);/* Sub Atributo*/
/* Aquí Insertarías al HTML en el formato deseado*/
},estrenos);
0

Suponiendo que tu "Array" es un Objeto :

EDITO

Puedes usar una función que de forma recursiva te añada más información si encuentra otro objeto recorriendo las propiedades del objeto que alamacena cada estreno.

function mostrarBotones(es){
  Object.keys(es).forEach(function(e){
    var btn = $('<button>');
    btn.html(es[e].Titulo);
    btn.click(function(event){
      $('.info').remove();
      var div = $('<div class="info">').appendTo($('body'));
      function anyadirProps(obj){
        Object.keys(obj).forEach(function(okey){
          $('<p>').addClass('bold').html(okey).appendTo(div);
          $('<p>').html(obj[okey]).appendTo(div);
        });
      }
      Object.keys(es[e]).forEach(function(ekey){
        if(typeof es[e][ekey] === 'object'){
          $('<p>').addClass('bold').html(ekey).appendTo(div);
          anyadirProps(es[e][ekey]);
          return;
        }
        $('<p>').addClass('bold').html(ekey).appendTo(div);
        $('<p>').html(es[e][ekey]).appendTo(div);
      });
      $('body').append();
    });
    $('body').append(btn);
  });
}

var estrenos = {}; //array con los 3 estrenos, cada ID del article se corresponde con el INDICE del array
estrenos['ant'] = {
    Titulo : 'El Hombre hormiga',
    Foto : 'ant_man_large.jpg',
    Trailer : 'https://www.youtube.com/v/P8ksX41WyxA',
    Info: 'Dotado con la asombrosa capacidad de reducir su tamaño pero aumentar su fuerza, el experto ladrón Scott Lang deberá abrazar su héroe interior y ayudar a su mentor, el Dr. Hank Pym, a proteger el secreto que se esconde detrás de su espectacular traje de Ant-Man de una nueva generación de imponentes amenazas. Contra obstáculos aparentemente insuperables, Pym y Lang deberán planear y ejecutar un plan que salvará el mundo.',
    Ficha: {
        Genero : 'Ciencia Ficcion',
        Fecha : '16 de julio de 2015',
        Duracion : '110 minutos',
        Clasificacion : 'Mayores 13 años'
    }
}

estrenos['jurassic'] = {
    Titulo : 'Jurassic World',
    Foto : 'jurassic_world_large.jpg',
    Trailer : 'https://www.youtube.com/v/GrUs5FR_eTA',
    Info: 'Veintidós años después de lo ocurrido en Jurassic Park, la isla Nublar ha sido transformada en un parque temático, Jurassic Wold, con versiones domesticadas de algunos de los dinosaurios más conocidos. Cuando todo parece ir a la perfección y ser el negocio del siglo, un nuevo dinosaurio de especie todavía desconocida y que es mucho más inteligente de lo que se pensaba, comienza a causar estragos entre los habitantes del Parque.',
    Ficha: {
        Genero : 'Acción',
        Fecha : '11 de junio de 2015 ',
        Duracion : '110 minutos',
        Clasificacion : 'Mayores 16 años'
    }
}

estrenos['pixels'] = {
    Titulo : 'Pixels',
    Foto : 'pixels_large.jpg',
    Trailer : 'https://www.youtube.com/v/Qh83tSbbV_I',
    Info: 'Unos alienígenas malinterpretan los videojuegos clásicos como una declaración de guerra y deciden atacar la Tierra usando esos juegos como modelos. El Presidente (Kevin James) debe llamar a su mejor amigo de la infancia Sam Brenner (Adam Sandler), quien fuera campeón de videojuegos en los años 80 para que dirija a un equipo de arcaders de la vieja escuela (Peter Dinklage y Josh Gad) que pueda derrotar a los alienígenas y salvar al planeta. A ellos se unirá la teniente Coronel Violet Van Patten (Michelle Monaghan).',
    Ficha: {
        Genero : 'Animación',
        Fecha : '23 de julio de 2015 ',
        Duracion : '90 minutos',
        Clasificacion : 'Apta todo público'
    }
}


mostrarBotones(estrenos);
.info {
  background : rgba(200, 50, 80, 0.4);
  padding : 10px;
  margin-top : 10px;
}

.bold {
  font-weight : bold;
}

p:not(.bold){
  color : #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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.