Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

200
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!