Apply CSS to array of objects in JSON

Question

Apply CSS to array of objects in JSON

Navigation

#1 by (4 votes)
#2 by (1 votes)

1

I need this array of objects in JSON

<script> var galeriaOriginal={"frases":[{"persona":"Bender Bending Rodríguez","frase":"Los robots no tenemos sentimientos... y eso me pone tan triste...","foto":"http://www.topimagenes.net/wp-content/uploads/2015/09/bender-futurama-7-desconfiado.jpg"},{"persona":"Pikachu","frase":"Pika Pika ","foto":"http://st-listas.20minutos.es/images/2011-11/310549/3269993_249px.jpg?1325815180"},{"persona":"Tyrion Lannister","frase":"Cuando doy el dinero para un regalo conjunto digo: Un Lannister siempre paga sus deudas.","foto":"http://i24web.com/wp-content/uploads/2016/05/tyrion-lannister-wallpaper-pack-01-700x525.png"}]}</script>

This is shown to me in a JS file via CSS and saved as localstorage

The problem is that I do not know how to do it, I've come to do this:

function mostrarFrases(){

//Cargamos la galeria para mostrarla
galeria=JSON.parse(localStorage.getItem("frases"));

for (var cont=0;cont<galeria.frases.length;cont++)
{

    document.write(galeria.frases[cont].frase);
    document.write(galeria.frases[cont].persona);
    document.write(galeria.frases[cont].foto);
}

}

But this shows me all the text without formatting and instead of the images I see the route only

I'm a rookie, if any of you can help me: D

javascript html css

asked by victor96 20.02.2018 в 20:56

source

2 answers

1

Another alternative if you do not mind losing compatibility with Internet Explorer is to use a template element and generate the elements from the template:

var galeria={"frases":[{"persona":"Bender Bending Rodríguez","frase":"Los robots no tenemos sentimientos... y eso me pone tan triste...","foto":"http://www.topimagenes.net/wp-content/uploads/2015/09/bender-futurama-7-desconfiado.jpg"},{"persona":"Pikachu","frase":"Pika Pika ","foto":"http://st-listas.20minutos.es/images/2011-11/310549/3269993_249px.jpg?1325815180"},{"persona":"Tyrion Lannister","frase":"Cuando doy el dinero para un regalo conjunto digo: Un Lannister siempre paga sus deudas.","foto":"http://i24web.com/wp-content/uploads/2016/05/tyrion-lannister-wallpaper-pack-01-700x525.png"}]}

function mostrarFrases(){
  // referencias a la plantilla y sus elementos
  var template = document.getElementById('card');
  var frase = template.content.querySelector('.frase');
  var autor = template.content.querySelector('.autor');
  var imagen = template.content.querySelector('img');

  for (var cont=0;cont<galeria.frases.length;cont++)
  {
    // Asigna los valores
    frase.textContent = galeria.frases[cont].frase;
    autor.textContent = galeria.frases[cont].persona;
    imagen.src = galeria.frases[cont].foto;
    // Crea un nuevo elemento a partir de la plantilla
    var newcard = document.importNode(template.content, true);
    // Añade el nuevo elemento
    document.querySelector('body').appendChild(newcard);
  }        
}

mostrarFrases();

.contenedor{
  background-color: black;
  color: white;
  display: flex;
  padding: 5px;
  margin: 5px;
}
.texto{
  width: 100%;
  padding: 5px 15px;
}
.texto span{
  display: block;
}
.autor{
  font-style: italic;
  padding-bottom: 10px;
}
.borrar{
  text-align: center;
}
.contenedor img{
  width: 100px;
  height: 100px;
}

<template id="card">
  <article class="contenedor">
    <div class="texto">
      <span class="frase"></span>
      <span class="autor"></span>
      <div class="borrar">
        <button>Borrar</button>
      </div>
    </div>
    <img />
  </article>
</template>

answered by 20.02.2018 в 22:15

Use a Windows Form as the main Error in HTML5 Calculator: TypeError: Can not set property 'onclick' of null

score 4 · Accepted Answer

To make it look like you want to create a structure HTML and assign CSS to it, you could do it in the following way:

Long way:

var contenedor = document.querySelector('.contenedor');

var galeriaOriginal = {
  "frases":[{
    "persona":"Bender Bending Rodríguez",
    "frase":"Los robots no tenemos sentimientos... y eso me pone tan triste...",
    "foto":"http://www.topimagenes.net/wp-content/uploads/2015/09/bender-futurama-7-desconfiado.jpg"
  }, {
    "persona":"Pikachu",
    "frase":"Pika Pika ",
    "foto":"http://st-listas.20minutos.es/images/2011-11/310549/3269993_249px.jpg?1325815180"
  }, {
    "persona":"Tyrion Lannister",
    "frase":"Cuando doy el dinero para un regalo conjunto digo: Un Lannister siempre paga sus deudas.",
    "foto":"http://i24web.com/wp-content/uploads/2016/05/tyrion-lannister-wallpaper-pack-01-700x525.png"
  }]
}

function mostrarFrases(){
  //Cargamos la galeria para mostrarla
  galeriaOriginal.frases.forEach(function(dato){
    var personaje = document.createElement('div');
    personaje.setAttribute('class', 'personaje');

    var texto = document.createElement('div');
    texto.setAttribute('class', 'texto');

    var titulo = document.createElement('h1');
    titulo.innerHTML = dato.frase;
    texto.appendChild(titulo);

    var frase = document.createElement('p');
    frase.innerHTML = dato.persona;
    texto.appendChild(frase);

    personaje.appendChild(texto);

    var foto = document.createElement('img');
    foto.src = dato.foto;
    personaje.appendChild(foto);

    contenedor.appendChild(personaje);
  });        
}

mostrarFrases();

*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: 100;
}

.personaje{
  background: black;
  height: 100px;
  margin-bottom: 30px;
  position: relative;
  padding: 20px 50px;
}

.personaje .texto h1{
  color: white;
  max-width: 60%;
  font-size: 16px;
  margin-bottom: 5px;
  position: relative;
  z-index: 10;
}

.personaje .texto p{
  color: white;
  font-family: cursive;
  font-size: 13px;
}

.personaje img{
  position: absolute;
  height: 100%;
  top: 0;
  right: 50px;
}

<div class="contenedor"></div>

Short way:

var contenedor = document.querySelector('.contenedor');

var galeriaOriginal = {
  "frases":[{
    "persona":"Bender Bending Rodríguez",
    "frase":"Los robots no tenemos sentimientos... y eso me pone tan triste...",
    "foto":"http://www.topimagenes.net/wp-content/uploads/2015/09/bender-futurama-7-desconfiado.jpg"
  }, {
    "persona":"Pikachu",
    "frase":"Pika Pika ",
    "foto":"http://st-listas.20minutos.es/images/2011-11/310549/3269993_249px.jpg?1325815180"
  }, {
    "persona":"Tyrion Lannister",
    "frase":"Cuando doy el dinero para un regalo conjunto digo: Un Lannister siempre paga sus deudas.",
    "foto":"http://i24web.com/wp-content/uploads/2016/05/tyrion-lannister-wallpaper-pack-01-700x525.png"
  }]
}

function mostrarFrases(){
  galeriaOriginal.frases.forEach(function(dato){
    contenedor.innerHTML += '<div class="personaje"><div class="texto"><h1>'+ dato.frase +'</h1><p>'+ dato.persona +'</p></div><img src="'+ dato.foto +'"></div>';
  });        
}

mostrarFrases();

*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: 100;
}

.personaje{
  background: black;
  height: 100px;
  margin-bottom: 30px;
  position: relative;
  padding: 20px 50px;
}

.personaje .texto h1{
  color: white;
  max-width: 60%;
  font-size: 16px;
  margin-bottom: 5px;
  position: relative;
  z-index: 10;
}

.personaje .texto p{
  color: white;
  font-family: cursive;
  font-size: 13px;
}

.personaje img{
  position: absolute;
  height: 100%;
  top: 0;
  right: 50px;
}

<div class="contenedor"></div>