Browse associative array and show through DOM

Question

Browse associative array and show through DOM

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I need to go through the following 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'
    }
}

These data must be traversed and then be shown by using DOM in the following HTML structure:

<!-- 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>

All this happens when you click on 3 different articles that I call from DOM. Color data: Each article has the same name as each position of the array. I'm having trouble going through it correctly, can someone help me? Thanks!

javascript array dom

asked by Cecilia 14.11.2016 в 22:20

source

2 answers

Chartr () removes documents within the corpus - R Sign apk on Android

score 1 · Answer 1

I could use Object.Keys to get an Arrangement for later iterate with a 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);

score 0 · Answer 2

Assuming that your "Array" is a Objeto :

EDITO

You can use a function that recursively adds more information if it finds another object by going through the properties of the object that calls each release.

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>