如何決議并形成帶有嵌套陣列的json？

我需要建議和幫助。我有一個代碼，我用它從表中以 json 格式接收資料，這樣我就可以通過 ajax 將它發送到服務器

for (var i = 1, row; row = table.rows[i]; i  ) {
    let docDate = document.querySelector('input[name="invoice-date"]').value
    let docContragent = document.querySelector('select').value
    // ITEMS
    let name = row.cells[1].querySelector('span').dataset.id
    let quantity = row.cells[2].querySelector('input').value
    let buy_price = row.cells[3].querySelector('input').value
    var sell_price = row.cells[5].querySelector('input').value

    if(row == document.querySelector('.add-elements')) {
      break;
    }
   let invoice = {
    "doc_type": "capitalize",
    "date": docDate,
    "number": 98,
    "contragent_id": docContragent,
    "comment": "",
    "items": [
        {
            "product": name,
            "buy_price": buy_price,
            "sell_price": sell_price,
            "quantity": quantity
          },
        ]
      }
      let json = JSON.stringify(invoice);
      console.log(json)
    }

問題是“專案”陣列（表中的行）中可以有任意數量的元素，我不知道如何在 javascript 中實作這一點。它有多安全？也許您知道發送此類資料的最佳選擇，我使用 django（我發現的唯一可能的解決方案是使用表單集，但在我看來，由于其有限的自定義，該選項將不起作用）。

我需要這個 json 輸出：

[
    {
        "doc_type": "capitalize",
        "date": "2022-06-04",
        "number": 1,
        "contragent_id" : 1,
        "comment": "",
        "items": [
            {
                "product": 10,
                "buy_price": "200.00",
                "sell_price": "500.00",
                "quantity": 5
            },
            {
                ...
            },
            {
                ...
            },
        ],
    }
]

表格的 HTML 是通過 api 動態添加的，代碼如下：

success: function (res) {
          let invoiceRow = document.querySelector(".invoice-add-table table tbody tr.add-elements").insertAdjacentHTML('beforebegin', '<tr >'  
          '<td align="right" >'  res.articul  '</td>'  
          '<td  align="left"><span data-id="'  res.id  '" title="'  res.name  '" style="text-decoration: underline; cursor: pointer;">'  res.name  '</span></td>'  
          '<td align="right" ><input name="quantity" value="'  1  '"  onkeypress="validateNum(event)" type="number"></td>'  
          '<td align="right" ><input name="last_buy_price" value="'  res.last_buy_price  '"  onkeypress="validateNumFloat(event)" type="number"></td>'  
          '<td align="right" ><input name="summ" value=""  onkeypress="validateNumFloat(event)" type="number"></td>'  
          '<td align="right" ><input name="sell_price" value="'  res.sell_price  '"  onkeypress="validateNumFloat(event)" type="number"></td>'  
          '<td align="right"><div style="display: flex;" ><span  onclick="test()" data-icon="bx:trash" style="color: white;" data-width="20"></span></div></td>' 
          '</tr>');
        },

P.s 如果文字有錯誤，我很抱歉，我是通過谷歌翻譯寫的）

uj5u.com熱心網友回復：

您的回圈將用所有專案填充您的陣列，最后用您的 json 上的所有專案推送陣列

let items = [];
let docDate;

for (var i = 1, row; row = table.rows[i]; i  ) {
    docDate = document.querySelector('input[name="invoice-date"]').value
    let docContragent = document.querySelector('select').value
    // ITEMS
    let name = row.cells[1].querySelector('span').dataset.id
    let quantity = row.cells[2].querySelector('input').value
    let buy_price = row.cells[3].querySelector('input').value
    var sell_price = row.cells[5].querySelector('input').value

    items.push({
        "product": name,
        "buy_price": buy_price,
        "sell_price": sell_price,
        "quantity": quantity
    });

    if(row == document.querySelector('.add-elements')) {
      break;
    }
}

let invoice = {
    "doc_type": "capitalize",
    "date": docDate,
    "number": 98,
    "comment": "",
    "items": items
}
let json = JSON.stringify(invoice);
console.log(json)

標籤：javascript json

上一篇：一個Bootstrap行中的多個BootstrapReact組件

下一篇：如何通過相應的axios呼叫回傳Promise？