3

Quiero renderizar un template en cadena de una serie de datos que ingreso a partir de un formulario, este es mi código javascript.

Con el código actual, me crea el template, pero cuando quiero agregar más valores este reemplaza los existentes, pero no se crea un segundo template.

Aquí obtengo mis elementos HTML de mi archivo. $form es donde ingreso los datos a mostrar y $containerProduct donde quiero renderizar mi cadena de templates

const $containerProduct = document.getElementById('product-list');
const $form = document.getElementById('product-form');

Ahora bien, defino una clase Product para manipular los datos de ingreso desde el form.

class Product {
    constructor(name, price, count) {
        this.name = name
        this.price = price
        this.count = count
    }
};

la function templateProduct me va permitir renderizar mi template con los datos

function templateProduct({ name, price, count }) {
    return `
    <div class="card text-center mb-4">
        <div class="card-body">
            <strong>Producto name: </strong> ${name}
            <strong>Price: </strong> ${price}
            <strong>Year: </strong> ${count}
            <a href="#" class="btn btn-danger" name="delete">Delete</a>
        </div>
    </div>
    `;
};

Aquí recibo el objeto product para poder iterar cada uno de sus valores y pasarlos como argumentos a las función templateProduct y container es donde voy a renderizar cada producto agregado desde el form.

function createProduct(product, container) {
    const productList = product.map(data => {
            return templateProduct(data);
        })
        //const HTMLString = productList
        container.innerHTML = productList;
};

Aquí, a través del evento submit empezaría a ejecutar todo mi código. Asigno las propiedades al objeto product y también crear un array de objetos para poder iterarlos en la función createProduct

//DOM event

document.getElementById('product-form')
    .addEventListener('submit', (e) => {
        const $name = document.getElementById('name').value;
        const $price = document.getElementById('price').value;
        const $count= document.getElementById('count').value;

        const product = new Product($name, $price, $count);
        const arrayProduct = [];
        const data = arrayProduct.push(product);
        createProduct(arrayProduct, $containerProduct);
    });

Aquí también dejo mi código html.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product App</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">Products App</a>
    </nav>


    <div class="container" id="container">
        <!-- APPLICATION -->
        <div id="App" class="row pt-5">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h4>Add Add A Product</h4>
                    </div>
                    <form id="product-form" class="card-body">
                        <div class="form-group">
                            <input type="text" id="name" placeholder="Product Name" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="number" id="price" step="0.01" placeholder="Product Price" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" id="count" placeholder="Quantity" class="form-control">
                        </div>
                        <input type="submit" value="Save" class="btn btn-primary btn-block">
                    </form>
                </div>
            </div>
            <div id="product-list" class="col-md-8"></div>
        </div>
    </div>

    <script src="./js/index.js"></script>
</body>

</html>

2 respuestas 2

0

El problema ocurre porqué cada vez que creas un nuevo producto estás volviendo a declarar la variable arrayProduct. Por otro lado, tampoco evitas el refresco de la pagina al enviar un evento submit con el botón "Save".

Una posible solución sería declarar la variable arrayProduct afuera del EventListener y utilizar el método preventDefault() para evitar el refresco de la pagina:

// Declaramos la lista de productos afuera del EventListener
const arrayProduct = [];

document.getElementById(
  'product-form'
).addEventListener('submit', (e) => {
  // Evitamos que la pagina se refresque
  e.preventDefault();

  const $name = document.getElementById('name').value;
  const $price = document.getElementById('price').value;
  const $count= document.getElementById('count').value;

  const product = new Product($name, $price, $count);
  const data = arrayProduct.push(product);
  createProduct(arrayProduct, $containerProduct);
});

Aquí te dejo un link a la documentación del método preventDefault:

0

Si te fijas en esta linea:

container.innerHTML = productList;

Lo que estas haciendo es reemplazar el contenido de innerHTML por el nuevo (productList), es por eso que obtienes ese problema de que tu contenido anterior se borra y en su lugar se reemplaza por el ultimo que hayas añadido.

Esto es por que estas usando una asignacion (=) en vez de una concatenación (+=).

No se si ya hayas visto el símbolo de concatenación (+=) que para el caso de los STRINGS solo tiene sentido ese operador, el resto de operadores como *=, -=, /=, %= simplemente no tiene sentido que los uses en cadenas de texto o strings.

Para el caso de números se utilizan a diario y todos son validos, son el pan de cada día, aquí un ejemplo de esos operadores y que puedas entender su propósito:

//Iniciamos cuatro variables diferentes en 5
let numero1 = numero2 = numero3 = numero4 = 5;

//Sumamos a lo que ya tenia la variable numero1 2 unidades
numero1 += 2;

//Restamos a lo que ya tenia la variable numero2 3 unidades
numero2 -= 3;

//Multiplicamos a lo que ya tenia la variable numero3 4 unidades
numero3 *= 4;

//Dividimos a lo que ya tenia la variable numero4 en 5 unidades
numero4 /= 5;

//Una operacion extra, la cual por el momento no se usa mucho pero es importante... lo que hace
//es sacarle el residuo de la division a un numero y luego guardarlo:

//numero3 %= 2;

console.log(numero1, numero2, numero3, numero4);

Para el caso particular de las cadenas de texto, como ya habíamos dicho antes solo tiene sentido usar uno de esos operadores, y ese es el operador de concatenacion +=, si lo usamos con cadenas de texto generara el siguiente resultado:

let helloWorld = "Hello";
helloWorld += " World!";

console.log(helloWorld);

como vemos conserva lo que tenia y le añade a ello el valor que deseemos.

Es justo esto lo que requieres, por lo que para resolver tu problema lo que puedes hacer es en esta linea:

container.innerHTML = productList;

En vez de usar una asignacion, usar una concatenacion:

container.innerHTML += productList;

Esto debe resolver tu inconveniente.

Hay que decir que hay mas operadores de ese estilo... pero no fueron mencionados aqui... ya que considere que los mas cruciales, basicos y usados son los anteriormente vistos.

4
  • Responder sólo con código se considera de baja calidad. Te invito a repasar Cómo responder y a editar tu respuesta con comentarios adicionales que la complementen. Saludos Commented el 7 jun. 2020 a las 13:19
  • Si, lo recuerdo, pero creo que el codigo no requiere explicacion.
    – Layer
    Commented el 7 jun. 2020 a las 17:01
  • Tal vez para ti no pero recuerda que este contenido será consultado por gente con amplio conocimiento como por novatos que requieren mayor contexto
    – user128299
    Commented el 7 jun. 2020 a las 20:24
  • Seguro, gracias por sus sugerencias las agradesco, voy a tomarlas en cuenta y editare la respuesta, ambos tienen razon.
    – Layer
    Commented el 7 jun. 2020 a las 20:42

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.