Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

202
Vistas
Dynamically create html pages

I'm trying to build a website, I have an API which extracts a list of products and gives me a JSON file which has all the info I need. What I wanted to achieve is to have a separate page created for each of the product - dynamically (since the JSON file will be changing). Is that possible with javascript/html?

Thank you

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Of course. This is how all retail websites are created.

I suggest you start learning some javascript framework like ReactJS or Angular. In short, after the JSON is received from the server, it is passed to -what we call- a component as props (properties). The component holds some jsx or html that forms the "skeleton" of the user interface. The objects in the JSON (I assume each object is a product), fill the skeleton.

This is an example of a very very very basic structure for one single product. You can use a for loop or the map method to iterate over your JSON so you can display each product's details in the following format:

In the following snippet, props could look like this {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>
)
}

Each product will have its own object with its own productImage, productTitle and price among other things you choose to add.

So you'll have 1,000 products (1,000 objects). You'll pass the products one by one to the above snippet (as props), and it'll display all of the products. Instead of writing 1,000 snippets for each product.

Obviously I can't teach you ReactJS in one answer. I highly recommend you look into React. You can find many tutorials on Youtube. What you're looking to do is very easy.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda