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

【问题标题】：Make JSON Data from HTML elements [duplicate]从HTML元素制作JSON数据[重复]
【发布时间】：2021-02-19 07:40:21
【问题描述】：

我是新手，所以我正在寻求帮助。在我看来，它应该足够简单。我有一段这样的 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 中一样，在你下面我计算总量。我该怎么做？

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

【问题讨论】：

400 + 100 + 40 = 1300 ？这是什么逻辑？

标签： javascript html jquery arrays json

【解决方案1】：

这是我的解决方案：

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>

【讨论】：