Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

205
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda