Estoy tratando de construir un sitio web, tengo una API que extrae una lista de productos y me da un archivo JSON que tiene toda la información que necesito. Lo que quería lograr es tener una página separada creada para cada uno de los productos, dinámicamente (ya que el archivo JSON cambiará). ¿Es eso posible con javascript/html?
Gracias
Por supuesto. Así es como se crean todos los sitios web minoristas.
Le sugiero que comience a aprender algún marco de javascript como ReactJS o Angular. En resumen, después de recibir el JSON del servidor, se pasa a -lo que llamamos- un componente como props (propiedades). El componente contiene algo de jsx o html que forma el "esqueleto" de la interfaz de usuario. Los objetos en el JSON (supongo que cada objeto es un producto), llenan el esqueleto.
Este es un ejemplo de una estructura muy muy muy básica para un solo producto. Puede usar un bucle for o el método de map para iterar sobre su JSON para que pueda mostrar los detalles de cada producto en el siguiente formato:
En el siguiente fragmento, los accesorios podrían verse así {productImage:"imgur.com/blabal.png",productTitle:"Product X",price:3000}
function product(props){ return( <div className="product-container"> <img className="product-image" src={props.productImage} <span className="product-title">{props.productTitle}</span> <span className="product-price">{props.price}$</span> ...... </div> ) } Cada producto tendrá su propio objeto con su propia productImage de producto, productTitle y price , entre otras cosas que elija agregar.
Entonces tendrás 1,000 productos (1,000 objetos). Pasará los productos uno por uno al fragmento anterior (como accesorios) y mostrará todos los productos. En lugar de escribir 1000 fragmentos para cada producto.
Obviamente, no puedo enseñarte ReactJS en una respuesta. Le recomiendo que busque en React . Puedes encontrar muchos tutoriales en Youtube. Lo que estás buscando hacer es muy fácil.