将 HTML 转换为 json 文件

Question

我在一个电子商务网站上工作，我需要将所有产品信息（例如产品名称、价格和产品描述）提取为 json 格式，但我不知道该怎么做。下面是一行产品的示例代码。

<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>

我需要将每个产品的各种详细信息提取到我的 JavaScript 代码的 .a json 文件中，但我不确定如何去做。我正在使用 VS 代码，从我正在使用的教程视频中，已经有一个包含所有产品信息的 .json 文件，但没有提到它是如何创建的，因此我无法跟进。

Answer 1

很奇怪你没有创建购物车的JSON

但在这里

const elements = [...document.querySelectorAll(".cakes div")].map(div => {
  const title = div.querySelector("h4").textContent;
  const img = div.querySelector("img").getAttribute("src");
  const text = div.querySelector("p").innerHTML;
  return {
    title,
    text,
    img
  }
})

const JSONString = JSON.stringify(elements)
console.log(JSONString)

<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>

将 HTML 转换为 json 文件

Convert HTML to a json file

html

javascript

css

json

e-commerce