Transform the HTML content into a JSON format file

I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows.

<div class='cakes'>
    <div class='col-3'>
        <img src = 'Images/banana cake.jpg'>
        <h4>Banana Cake</h4>
        <p>&#8373;30</p>
        <button class='add-to-cart' data-id='1'>Add To Cart</button>
    </div>
    <div class='col-3'>
        <img src = 'Images/pastry_box_1.jpg'>
        <h4>Pastry Box</h4>
        <p>Mini: &#8373;35 | Midi: &#8373;50 | Maxi: &#8373;90</p>
        <button class='add-to-cart' data-id='1'>Add To Cart</button>
    </div>
    <div class='col-3'>
        <img src = 'Images/cupcakes_12.jpg'>
        <h4>Cupcakes</h4>
        <p>Box of 4: &#8373;30 |  Box of 12: &#8373;85 | Box of 6: &#8373;40</p>
        <button class='add-to-cart' data-id='1'>Add To Cart</button>
    </div>

My goal is to compile each product's details into a .json file for my JavaScript implementation, but I'm uncertain on the required steps. The tutorial resources that I'm following include a .json file with the product info, however, the process of creating it has not been explained. Consequently, I'm struggling to proceed as intended.

javascripthtmlcssjsone-commerce

Answer №1

It's quite surprising that the JSON responsible for creating the cart is missing.

But fear not, I have it right here!

const items = [...document.querySelectorAll(".cakes div")].map(div => {
  const name = div.querySelector("h4").textContent;
  const picture = div.querySelector("img").getAttribute("src");
  const description = div.querySelector("p").innerHTML;
  return {
    name,
    description,
    picture
  }
})

const cartJSON = JSON.stringify(items)
console.log(cartJSON)
<div class='cakes'>
  <div class='col-3'>
    <img src='Images/banana cake.jpg'>
    <h4>Banana Cake</h4>
    <p>&#8373;30</p>
    <button class='add-to-cart' data-id='1'>Add To Cart</button>
  </div>
  <div class='col-3'>
    <img src='Images/pastry_box_1.jpg'>
    <h4>Pastry Box</h4>
    <p>Mini: &#8373;35 | Midi: &#8373;50 | Maxi: &#8373;90</p>
    <button class='add-to-cart' data-id='1'>Add To Cart</button>
  </div>
  <div class='col-3'>
    <img src='Images/cupcakes_12.jpg'>
    <h4>Cupcakes</h4>
    <p>Box of 4: &#8373;30 | Box of 12: &#8373;85 | Box of 6: &#8373;40</p>
    <button class='add-to-cart' data-id='1'>Add To Cart</button>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever I include an onClick event to a div element, the entire webpage fails to display

Currently taking on the task of developing a seat booking website. I am encountering an issue with adding an event listener to a particular div element, which should trigger a function to store the value of the div. However, upon implementing the onClick e ...

javascripthtmlreactjs

How can I use CSS to clip the United States, specifically Tennessee and Nashville, from the left side?

For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the worl ...

htmlcssasp.net

Header misalignment occurs when the user scrolls up too quickly causing it to display

One interesting feature on my website is that the header disappears as users scroll down the page, but reappears when they start scrolling back up, even if they are halfway down. However, if a user quickly scrolls up and down, there seems to be an issue wi ...

javascriptjqueryhtmlcss

How can one ensure the preservation of array values in React?

I'm struggling to mount a dynamic 'select' component in React due to an issue I encountered. Currently, I am using a 'for' loop to make API calls, but each iteration causes me to lose the previous values stored in the state. Is t ...

javascriptreactjsselectinfinite-loop

Unforeseen issues arise when using material ui's Select component in conjunction with 'redux-form'

I am encountering an issue with a 'redux form' that includes a Select component from the latest material-ui-next. import { TextField } from 'material-ui'; <Field name="name" component={TextField} select > <MenuIte ...

javascriptreactjsdrop-down-menumaterial-uiredux-form

"Utilize Selenium to navigate and select a menu option with a

In my dropdown menu, I am trying to use Selenium to move the mouse to the Documentation menu item and click on the App Configuration option within it. The mouse hover function is working properly, but I am unable to click on the App Configuration element. ...

javajavascripthtmlselenium

Node accurately handles and displays errors, such as validation errors, in a precise manner

I am currently restructuring our code base to incorporate promises. Below are two blocks of sample code: user.service.js export function updateUserProfileByUsername(req, res) { userController.getUserByUsername(req.params.username) .then((userProfile ...

javascriptnode.jsexpressmongoose

Using jQuery to fill out a form using data from a JSON

I'm struggling with understanding jQuery... I want to populate a form inside a jQueryUI dialog box. Although I can retrieve the JSON data successfully, I am having difficulty referencing the data and setting the values in the form fields... Below are ...

jqueryjsonforms

Is there a way to transfer a text file from an iPhone application to an ASP.NET platform?

Can anyone assist me with retrieving a text file sent from an iPhone application to my ASP.NET application? HttpContext context = HttpContext.Current; NameValueCollection nvc = context.Request.Form; string file = nvc["text_file"]; I have success ...

asp.netjson

Encountering issues when using array.map with null entries in a react application

Struggling to iterate over the location array and map it? Despite several attempts, handling the null object within the array seems challenging. What am I missing here? While using a for loop resolves the issue, the map function is proving to be a roadbloc ...

javascriptarraysreactjsreact-leaflet

What is a method to position an <img> on top of text without obscuring the text or resorting to CSS background or text-indent

To view the related code snippet, click on this link: http://jsfiddle.net/Ws8ux/ Is there a way to position the text under the logo without hiding it through display:none or text-indent? I am aiming to bring the image up while keeping the logo in the back ...

htmlcss

Rendering a Nativescript component once the page has been fully loaded

I'm currently working on integrating the WikitudeArchitectView into my TypeScript code. I've successfully registered the element in the main.ts TypeScript file: var architectView = require("nativescript-wikitudearchitectview"); registerElement ...

javascriptjqueryangulartypescriptwikitude

Learn how to effectively utilize templateURL in an express and angular project

Our project utilizes Express without any view engine. To set up static directories, we have the following: app.use(express.static(__dirname + '/public')); app.use(express.static(__dirname + '/view')); app.use(express.static(__dirname + ...

javascriptangularjsnode.jsexpress

Tips for creating equal height columns in Bootstrap 4

Working with Bootstrap 4 Beta in an attempt to create two columns that maintain full height regardless of screen size. The code below functions perfectly, ensuring both columns maintain full height across all devices. However, upon inserting the bootstra ...

javascriptjqueryhtmlcsstwitter-bootstrap

The tag that is mandatory is not functioning properly in the Bootstrap form

I am currently working on integrating a Bootstrap form into my Flask website, and I am facing an issue with making certain fields mandatory before submission. I have tried using the "required" attribute in the input tags, but for some reason, it is not wor ...

htmlflaskbootstrap-5

Exploring the contrast: resolve() versus fulfill() in q.js

I'm finding it difficult to understand the distinction between calling a resolver's resolve() as opposed to fulfill(). Both functions and terms "resolve a promise" and "fulfill a promise" are frequently used interchangeably. Can you provide guid ...

javascriptasynchronouspromiseq

We are experiencing difficulties rendering flash messages in Expressjs with Handlebars(hbs) and express-messages using flash-connect

I'm working on an express app and I want to display flash messages when a user signs up using a form. The technologies I am utilizing include Node.js, Express.js, Handlebars(hbs), connect-flash, and express-messages. To make finding errors easier, I ...

javascriptnode.jsexpresshandlebars.jsrendering

Sort an array of objects by matching string properties with elements from another array

If the array of objects is represented by rows and wantedBrands consists of an array of strings, how can I achieve a specific result? let rows = [ { name: "Russia", brands: ['XM1', 'XM2', 'XM3'] }, ...

javascriptreactjsarraysloopsobject

Concealing the TinyNav Drop-Down Menu

Currently, I am utilizing TinyNav on my website and it is working wonderfully. However, due to our extensive menu system, the tinynav dropdown appears quite large. I have been attempting to figure out a way to hide all sub-menus without success. I experim ...

javascriptcssdrop-down-menumenusubmenu

A single element containing two duplicates of identical services

I am encountering an issue with my query builder service in a component where I need to use it twice. Despite trying to inject the service twice, it seems that they just reference each other instead of functioning independently, as shown below: @Component( ...

javascriptangulartypescript