Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Pregunta sobre api para mi E-commerce

Hola tengo ese codigo de mis bloques de venta

<div class="ventas">
                        <div class="ventas__imagen" data-imagen="img/ventas/start-wars/yoda.jpg">
                            <img src="img/ventas/start-wars/yoda.jpg" alt="yoda">
                        </div>
                        <div class="venta__detalles">
                            <h4 class="venta__detalles-titulo">yoda muñeco</h4>
                            <h5 class="precio-venta">$ 30,00</h5>
                            <a class="ver_producto">Ver producto</a>
                        </div>
                    </div>

                    <!-- cartuchera -->
                    <div class="ventas">
                        <div class="ventas__imagen" data-imagen="img/ventas/start-wars/cartuchera.jpg">
                            <img src="img/ventas/start-wars/cartuchera.jpg" alt="cartuchera">
                        </div>
                        <div class="venta__detalles">
                            <h4 class="venta__detalles-titulo">cartuchera</h4>
                            <h5 class="precio-venta">$ 20,00</h5>
                            <a class="ver_producto">Ver producto</a>
                        </div>
                    </div>

                    <!-- tarro galletas -->
                    <div class="ventas">
                        <div class="ventas__imagen" data-imagen="img/ventas/start-wars/galletas.jpg">
                            <img src="img/ventas/start-wars/galletas.jpg" alt="tarro de galletas">
                        </div>
                        <div class="venta__detalles">
                            <h4 class="venta__detalles-titulo">tarro de galletas</h4>
                            <h5 class="precio-venta">$ 100,00</h5>
                            <a class="ver_producto">Ver producto</a>
                        </div>
                    </div>

                    <!-- maletin -->
                    <div class="ventas">
                        <div class="ventas__imagen" data-imagen="img/ventas/start-wars/maletin.jpeg">
                            <img src="img/ventas/start-wars/maletin.jpeg" alt="maletin">
                        </div>
                        <div class="venta__detalles">
                            <h4 class="venta__detalles-titulo">maletin</h4>
                            <h5 class="precio-venta">$ 2000,00</h5>
                            <a class="ver_producto">Ver producto</a>
                        </div>
                    </div>

                    <!-- sanducheras -->
                    <div class="ventas">
                        <div class="ventas__imagen" data-imagen="img/ventas/start-wars/sandwitch.jpg">
                            <img src="img/ventas/start-wars/sandwitch.jpg" alt="sanduchera">
                        </div>
                        <div class="venta__detalles">
                            <h4 class="venta__detalles-titulo">sanducheras</h4>
                            <h5 class="precio-venta">$ 60,00</h5>
                            <a class="ver_producto">Ver producto</a>
                        </div>
                    </div>

necesito saber como hago la api para recorrer cada uno y crearla?, con ayuda de una inteligencia artificial me ayudo a hacer esta pero no me ayuda con lo del video y necesito ayuda

const ventas = [];

// Función para convertir una cadena de precio a un número
function parsePrice(priceString) {
  const price = priceString.replace(/[^\d.,]/g, "").replace(",", ".");
  return parseFloat(price);
}

// Función para obtener todos los elementos con la clase "ventas"
const elementosVentas = document.querySelectorAll(".ventas");

// Iterar sobre los elementos de ventas y construir el objeto JSON
elementosVentas.forEach((elementoVenta) => {
  const imagenElemento = elementoVenta.querySelector(".ventas__imagen");
  const imagenRuta = imagenElemento.getAttribute("data-imagen");
  const detallesElemento = elementoVenta.querySelector(".venta__detalles");
  const tituloElemento = detallesElemento.querySelector(".venta__detalles-titulo").textContent;
  const precioElemento = detallesElemento.querySelector(".precio-venta").textContent;

  const venta = {
    imagen: imagenRuta,
    titulo: tituloElemento,
    precio: parsePrice(precioElemento)
  };

  ventas.push(venta);
});

// Crear un objeto JSON con la estructura completa
const ventasJSON = {
  ventas: ventas
};

// Imprimir el objeto JSON en la consola
console.log(JSON.stringify(ventasJSON, null, 2));
1 respuesta
solución!

¡Hola Hernán!

Para crear una API que recorra cada uno de los elementos de tu código y los convierta en un objeto JSON, puedes utilizar un servidor web y un framework como Express.js en Node.js. Aquí te muestro un ejemplo de cómo podrías hacerlo:

const express = require('express');
const app = express();

// Ruta para obtener los datos de las ventas
app.get('/api/ventas', (req, res) => {
  const ventas = [];

  // Aquí iría tu código para obtener los datos de las ventas

  // Iterar sobre los elementos de ventas y construir el objeto JSON
  elementosVentas.forEach((elementoVenta) => {
    const imagenElemento = elementoVenta.querySelector(".ventas__imagen");
    const imagenRuta = imagenElemento.getAttribute("data-imagen");
    const detallesElemento = elementoVenta.querySelector(".venta__detalles");
    const tituloElemento = detallesElemento.querySelector(".venta__detalles-titulo").textContent;
    const precioElemento = detallesElemento.querySelector(".precio-venta").textContent;

    const venta = {
      imagen: imagenRuta,
      titulo: tituloElemento,
      precio: parsePrice(precioElemento)
    };

    ventas.push(venta);
  });

  // Crear un objeto JSON con la estructura completa
  const ventasJSON = {
    ventas: ventas
  };

  // Enviar los datos de las ventas como respuesta
  res.json(ventasJSON);
});

// Iniciar el servidor en el puerto 3000
app.listen(3000, () => {
  console.log('Servidor iniciado en el puerto 3000');
});

Una vez que hayas configurado tu servidor y hayas creado la ruta para obtener los datos de las ventas, podrás acceder a la API en la siguiente dirección: http://localhost:3000/api/ventas. Al ingresar a esa URL, recibirás los datos de las ventas en formato JSON.

Recuerda que este es solo un ejemplo básico y que deberás adaptarlo a tus necesidades. Si tienes alguna otra pregunta, ¡no dudes en preguntar! ¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)