从 HTML 元素制作 JSON 数据 [复制]-解网

问：

2年前关闭。

我是新手，所以我正在寻求帮助。在我看来，它应该足够简单。我有一段这样的 HTML 代码：

    <div class="shopping-cart-list">
    <div>
        <div class="toReceipt" style="display: none;">
            <div class="toReceiptName">Position 1</div>
            <div class="toReceiptPrice">200</div>
            <div class="toReceiptQuantity">2</div>
            <div class="toReceiptAmount">400</div>
        </div>
    </div>
    <div>
        <div class="toReceipt" style="display: none;">
            <div class="toReceiptName">Position 2</div>
            <div class="toReceiptPrice">100</div>
            <div class="toReceiptQuantity">1</div>
            <div class="toReceiptAmount">100</div>
        </div>
    </div>
    <div>
        <div class="toReceipt" style="display: none;">
            <div class="toReceiptName">Position 3</div>
            <div class="toReceiptPrice">20</div>
            <div class="toReceiptQuantity">2</div>
            <div class="toReceiptAmount">40</div>
        </div>
    </div>
</div>

我需要制作如下JSON数据。如果我理解正确，那么您需要解析 HTML 代码并将其转换为 JSON。因此，位置在 JSON 中重复，就像在 HTML 中一样，在你下面 I 计算总金额。我该怎么做？

var receipt = {
    "Items": [{
            "label": "Position 1",
            "price": 200.00,
            "quantity": 2.00,
            "amount": 400.00,
        },
        {
            "label": "Position 2",
            "price": 100.00,
            "quantity": 1.00,
            "amount": 100.00,
        },
        {
            "label": "Position 3",
            "price": 20.00,
            "quantity": 2.00,
            "amount": 40.00,
        },
    ],
    "amounts": {
        "electronic": 1300.00, // Calculate amount of all positions
    }
}

JavaScript HTML jQuery 数组 JSON

function go() {
  let result = {
    "Item": [],
    "amounts": {}
  };
  let totalAmount = 0;
  $("div.shopping-cart-list div.toReceipt").each((index, item) => {
    result.Item.push({
      "label": $(item).find("div.toReceiptName").text(),
      "price": Number($(item).find("div.toReceiptPrice").text()),
      "quantity": Number($(item).find("div.toReceiptQuantity").text()),
      "amount": Number($(item).find("div.toReceiptAmount").text())
    })
    totalAmount += Number($(item).find("div.toReceiptAmount").text());
  });
  result.amounts = {
    "electronic": totalAmount
  };
  console.log(result);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shopping-cart-list">
  <div>
    <div class="toReceipt" style="display: none;">
      <div class="toReceiptName">Position 1</div>
      <div class="toReceiptPrice">200</div>
      <div class="toReceiptQuantity">2</div>
      <div class="toReceiptAmount">400</div>
    </div>
  </div>
  <div>
    <div class="toReceipt" style="display: none;">
      <div class="toReceiptName">Position 2</div>
      <div class="toReceiptPrice">100</div>
      <div class="toReceiptQuantity">1</div>
      <div class="toReceiptAmount">100</div>
    </div>
  </div>
  <div>
    <div class="toReceipt" style="display: none;">
      <div class="toReceiptName">Position 3</div>
      <div class="toReceiptPrice">20</div>
      <div class="toReceiptQuantity">2</div>
      <div class="toReceiptAmount">40</div>
    </div>
  </div>
</div>
<button onclick="go()">
Go
</button>

上一个：每次滚动到事件时仅触发一次事件

下一个：PHP 中的 SOAP 请求和响应

从 HTML 元素制作 JSON 数据 [复制]

Make JSON Data from HTML elements [duplicate]

评论