Dynamically Manage a Grid of Products in an Online Store with a JSON Document
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.
Instructor: [0:00] We're going to start off with our Next.js store. In our store, we currently have three products. Inside of our app we're currently showing those products using an unordered list with a card for each product, but we're currently managing those cards manually. Meaning anytime we want to change or add a product, we have to come in and edit the HTML.
[0:17] Instead we can create a JSON file, where we can externally manage this data and update it to loop through each of those products. To start, I'm going to create a new file inside of my project directory called products.json. Inside that file, I'm going to simply add an empty array for now.
[0:32] Back inside my home page, I'm going to import that file by adding import products from, one upper directory products.json. To test that this works, I'm going to add a console.log statement, where I'm going to say my products and log out that variable, just to see what's inside. If we open back up our store and check out the web developer tools, we can see that we're logging out that products array, which is currently empty.
[0:54] Next, I want to manage every single one of these dynamic data points within that file. To start, I'm going to create a new empty object where we can start off our first one with a title of spaceJellyTshirt. Next, I'll add a description where I'm going to paste in that value. We also want to reference our image file, and finally a price, which for this one, it's $20.
[1:15] At this point, I can add my other two products just the same. Now that we have our products in there, we can go back and see how this looks on our browser. We can see that when we refresh the page, we now have our array where we have our three product objects.
[1:26] Now that we have this array available inside of our app, we can loop through it to create our UI. Inside of our grid, I'm going to say products. I'm going to run the map function. For each product, I'm going to run this function where I'm going to take this block of the list item, and I'm going to return that where I'm going to replace each of these attributes with dynamic values.
[1:44] For instance, I'm going to destructure the title from our product where I can then use that title for both the alt tag as well as the actual title of the product card. I can also destructure the price where I can take that price variable and update it right inside of our HTML. Similarly, we can do that with our description and our image, where we can replace our description, and we can replace our image.
[2:06] If we go back to our shop, we can see that we have six products, which makes sense because we're first looping through our products, but then we're still showing them statically. We can scroll down here and we can get rid of those static instances of our product cards, where now we only have this loop. We can see that we properly only have our three products.
[2:25] Finally, if we open up our developer tools, we can see that we have one problem where we're not including a key prop. For each card we create in this map function, we need to make sure we add a key prop to our card. This key value needs to be unique for each card.
[2:37] Because we have our product set up this way, we could probably use the title. Instead, it probably makes more sense to include an ID.
[2:43] If we remember back in Stripe, each one of our products has a pricing ID, where we can copy this ID. We can add it as a new field to our product object along with the ID of our other products, where we can destructure that ID from our product, use it as our key. When the page reloads, we can see that we no longer see that warning.
[3:00] The great thing about managing our products in this JSON file is, anytime we want to make a change to one of our products or even add a product. We can make that change in the file without playing with any of the HTML or JSX.
[3:12] In review, we created a products.json file inside of our project, where we added each one of our products as an object inside of an array. On our home page, we imported those products, where we can use them inside of our app.
[3:23] Particularly, we're looping through each of those products with a map function, where for each product, we're destructuring the properties of that product and creating a new product card with a list element that creates all the products for our app.