0

Estoy desarrollando una pagina web que tiene unas tarjetas con información de un producto. La informacion la obtengo de Firebase realtime Database. La función es la siguiente:

function GetInfoProduct(){

  let PathTitleProduct1;

  PathTitleProduct1 = "/Productos/";

  firebase.database().ref(PathTitleProduct1).on('value', (snapshot) => {
    let DatagettedTitleProduct1 = '';
    if(snapshot.val()){
      DatagettedTitleProduct1 = snapshot.val();
      console.log(DatagettedTitleProduct1);
      let TitleProduct1 = document.getElementById('title_product_1');
      TitleProduct1.innerHTML = DatagettedTitleProduct1;
    }
  })

}

La funcion anterior me muestra en consola un resultado de tipo Objeto y me muestra la longitud que tiene este, me muestra que tiene una longitud de 3 valores y dentro de esos 3 valores tiene mas datos. Lo que quiero saber es como puedo hacer que dependiendo a la longitud del objeto me muestre tantas tarjetas es decir si tengo 3 de logitud que se muestren 3 tarjetas aunque en el html solo tenga registrada una tarjeta y que en cada tarjeta la informacion sea dependiendo a la que se obtiene. el codigo html de una tarjeta es la siguiente.

                    <div class="product_card">

                        <img loading="lazy" src="https://www...exemplo.png" alt="ejemplo">

                        <p id="title_product_1"></p>

                        <p id="subtitle_product_1"></p>

                        <div class="variaciones">

                            <p id="variations_title">Variaciones</p>

                            <p id="v1"></p>

                            <p id="v1"></p>

                            <br>

                        </div>

                        <div class="SizeAndPrice">

                            <p id="SaPtitle">Tamaños y Precios</p>

                            <div class="size">

                                <p id="sizep">Individual</p>
                                <p id="sizep">Pareja</p>
                                <p id="sizep">Familiar</p>

                            </div>

                            <div class="price">

                                <p id="pricep"></p>
                                <p id="pricep"></p>
                                <p id="pricep"></p>

                            </div>                        

                        </div>

                        <div class="btn_buy">

                            <p>Agregar al Carrito</p>                                

                        </div>

                    </div>                    
                    
                </div>

2 respuestas 2

2

Lo que debes hacer es recorrer el objeto y por cada valor que tengas agregar una tarjeta con un inner html quizá esto te sirva de idea sobre como recorrer el objeto por medio de un ciclo for.

var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Salida:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Y solo seria agegarle un innerHtml por cada elemento en tu objeto, mira las fuentes para mas informacion

Básicamente seria eso solo vas agregando a tu carta los sub valores de tu objeto en diversas partes, lo construyes con el innerHtml y las comillas inversas backticks de javascript

1

Espero que esto te sirva de ayuda. Lo que hago es de un json para emular tus datos json.parse lo transformo en un objeto. Después creo una función renderData que recorre todos los elementos de dicha y los añade al html con innerHtml la función renderData obtiene como parámetro una lista de objetos a los cuales les llamo elements con esto accedo a los datos del elemento para añadirlos a las cards que genero de forma dinámica

const data = JSON.parse('[{"_id":"5efadd9cc395d27a08327337","index":0,"guid":"7ef80488-dd43-4755-bc53-6ed5d4ba5718","isActive":false,"balance":"$3,810.20","picture":"http://placehold.it/32x32","age":34,"eyeColor":"blue","name":{"first":"Adrienne","last":"Gibson"},"company":"ACCEL","email":"[email protected]","phone":"+1 (982) 568-2652","address":"854 Bergen Avenue, Lindisfarne, California, 5694","about":"Cupidatat dolor duis sit cillum commodo adipisicing velit veniam. Id incididunt Lorem duis aliquip id sit in qui mollit laboris officia. Consequat consectetur consectetur ex commodo pariatur consectetur et id.","registered":"Thursday, June 21, 2018 5:42 PM","latitude":"28.120977","longitude":"-11.134193","tags":["labore","enim","dolore","amet","ipsum"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Jodi Gregory"},{"id":1,"name":"Dorothy Page"},{"id":2,"name":"Saundra Taylor"}],"greeting":"Hello, Adrienne! You have 8 unread messages.","favoriteFruit":"strawberry"},{"_id":"5efadd9cf1b438de98855f51","index":1,"guid":"41c62512-4f0b-4b15-a42e-7e7d49b9ec2a","isActive":false,"balance":"$1,696.80","picture":"http://placehold.it/32x32","age":25,"eyeColor":"brown","name":{"first":"Catalina","last":"Evans"},"company":"QIMONK","email":"[email protected]","phone":"+1 (940) 468-3253","address":"226 Centre Street, Wolcott, Arkansas, 6780","about":"Aliqua elit incididunt aliqua elit elit proident exercitation tempor reprehenderit magna nisi consequat Lorem elit. Est et deserunt eiusmod ipsum aliqua ea consectetur voluptate. Occaecat incididunt voluptate in adipisicing.","registered":"Monday, October 7, 2019 9:54 PM","latitude":"88.749021","longitude":"171.865187","tags":["et","eu","dolore","ea","officia"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Leblanc Ferrell"},{"id":1,"name":"Horn Preston"},{"id":2,"name":"Cantrell Woods"}],"greeting":"Hello, Catalina! You have 7 unread messages.","favoriteFruit":"apple"},{"_id":"5efadd9c377892fc02482978","index":2,"guid":"04ead300-d466-494c-8f3b-2c806b61010f","isActive":false,"balance":"$3,422.26","picture":"http://placehold.it/32x32","age":37,"eyeColor":"green","name":{"first":"Oconnor","last":"Briggs"},"company":"ZOID","email":"[email protected]","phone":"+1 (944) 592-3342","address":"456 Ainslie Street, Clarksburg, Guam, 6111","about":"Consectetur culpa deserunt quis minim nulla velit enim sit culpa. Sit aute culpa nostrud duis voluptate culpa ullamco ad. Consectetur occaecat ex consequat occaecat exercitation occaecat esse laboris dolor cupidatat. Excepteur incididunt laboris laborum exercitation Lorem ea dolore velit laboris adipisicing elit. Proident non qui laborum et voluptate fugiat veniam dolore eu. Do eu velit sunt dolore elit irure et exercitation.","registered":"Friday, June 9, 2017 12:38 AM","latitude":"-52.637226","longitude":"-17.246854","tags":["do","veniam","aliqua","veniam","magna"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Larson Burnett"},{"id":1,"name":"Kane Allen"},{"id":2,"name":"Marlene Davidson"}],"greeting":"Hello, Oconnor! You have 6 unread messages.","favoriteFruit":"banana"},{"_id":"5efadd9c8967bd119048f5ab","index":3,"guid":"63794bdf-2e8e-48aa-b493-d78966b0fda3","isActive":false,"balance":"$3,199.75","picture":"http://placehold.it/32x32","age":39,"eyeColor":"blue","name":{"first":"Bullock","last":"Dotson"},"company":"PORTALINE","email":"[email protected]","phone":"+1 (910) 499-3284","address":"391 Suydam Place, Eureka, Kansas, 3839","about":"Ullamco nisi reprehenderit anim occaecat cillum adipisicing tempor sunt. Do enim eiusmod anim id deserunt amet aliquip ut aliquip quis. Nostrud culpa nulla enim commodo reprehenderit est incididunt duis aute enim laboris velit officia. In veniam ad irure nulla est proident reprehenderit in minim anim nulla. Nisi proident labore enim ullamco. Cupidatat elit ullamco enim culpa consectetur.","registered":"Monday, October 1, 2018 5:10 PM","latitude":"-46.642782","longitude":"-174.679251","tags":["non","commodo","minim","nulla","Lorem"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Sonja Tucker"},{"id":1,"name":"Graciela Michael"},{"id":2,"name":"Thomas Lindsey"}],"greeting":"Hello, Bullock! You have 6 unread messages.","favoriteFruit":"strawberry"}]')
const contenedor = document.getElementById('container')
//data.forEach(element => {console.log(element)});
const renderData = (datos)=> datos.forEach(element => {
contenedor.innerHTML +=`<br>  <div class="card">
    <div class="card-header">${element.company}</div>
    <div class="card-body">${element.about}</div> 
    <div class="card-footer">${element.greeting}</div>
  </div>`
});
renderData(data);
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div id=container class="container-fluid">
  <h2>Card Header and Footer</h2>
  <div class="card" >
    <div class="card-header">credo por html header</div>
    <div class="card-body">credo por html body</div> 
    <div class="card-footer">credo por html footer</div>
  </div>

</div>

Si tienes alguna duda pregunta

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.