₦airaland Forum

Hello Seniors in web development, I am currently experiencing difficulty in something i have been trying to implement, for days now.

In my journey of learning how to develop websites, I made a products page using HTML, CSS and vanilla JavaScript.

My problem is, when one clicks on a product, i want the details of that specific product displayed. But I don't want to make html file pages for each product, although i hard coded the anchor links for each products in html, but each href contains an id that points to specific property in the array of objects i am using from an API.
I have searched YouTube, i could not find any help.

The approach i tried is, inside the event that listens for a click of each products, i sliced the id from its href, wrote a function that return a value and passed the id returned. Then i exported the function to a page( a single product page as used a template) so that i can loop through the returned API array of objects for an id that matches the id and display its details from same object, but its not working, please help or recommend a video, thanks.

This seems like a job for react + react-router

Deicide:
This seems like a job for react + react-router

Thank you for your response.
I definitely have react in mind(to learn), but I want to be used vanilla JavaScript well, before delving into react.

What backend are u using?


If you're not using a backend
If you have an API you could use Fetch or Ajax with Jquery.


Once you've fetch the product details

Just Append the html you've coded to any parent you want it it display with the details you've fetched


Of course you'll want to remove the old product Html from the parent before appending the new one


Your page won't refresh for better experience....


You can as well add a loader as your request is fetching the product data

Paystack:
What backend are u using?


If you're not using a backend
If you have an API you could use Fetch or Ajax with Jquery.


Once you've fetch the product details

Just Append the html you've coded to any parent you want it it display with the details you've fetched


Of course you'll want to remove the old product Html from the parent before appending the new one


Your page won't refresh for better experience....


You can as well add a loader as your request is fetching the product data

Thanks for this very nice idea, I am very grateful.
I am fetching from an already established API.

Thanks all, finally did it.
Just got the current products url, slice out the id from it and loop through the items in the API to find a match and basically display, OMG very happyyyyy!