Dynamically Manage a Grid of Products in an Online Store with a JSON Document

InstructorColby Fayock

Share this video with your friends

Send Tweet

Manually creating blocks of HTML for every product in our store can take a long time depending on how many products the store has. On top of that, making any changes to those products makes that even more of a challenge as you try to search through the file and know where to make the change.

Instead, we can manage our products in a central location and use that to build our store pages. The central location we'll use is a JSON file within our application that will store all the information on our products. With this information in one place, we can access and use some or all of that info where ever we need it. In this lesson, we'll map over the Products JSON and create our product cards dynamically.

~ 4 years ago

Using Microsoft Edge Browser:

I have several issues during the lectures:

  1. I am having trouble hearing you, despite my volume being at the max and not having any issues with other media.
  2. At different points in the videos, the screen flickers green, making it VERY difficult to transcribe the code you are sharing
  3. I created a flavicon (in both .svg and .ico formats) but the tab and the footers are not rendering the images.

    for this, I am seeing a 400 error (I am sending a bad request), the path that my images are located are where your vercel.svg icon was originally located.

Any tips?