堆棧內存溢出
  簡體   English   中英

如何將 HTML 表中的值轉換為 javascript 中的 JSON 數組，不包括最后一行中的任何輸入是否為空

[英]How to convert value from HTML table to JSON array in javascript excluding if any of the input in last row is empty

 原文  2021-12-21 07:04:20  4   3    javascript/ html

問題描述

 <:DOCTYPE html> <html> <body> <table style="width;100%: border-collapse; collapse: text-align; center:" id="stockinboundedittable"> <tr> <th style="display;none.">subcategory</th> <th>Sl.No</th> <.--<th>I:U;Code</th>--> <th>Item Name</th> <th> old stock</th> <th> new stock</th> <th> Total Stock</th> <th> qty</th> <th>Edit</th> </tr> <tr> <td style="display:none;">sdvsvds</td> <td> <input style=" width: 100%;" id="slno1editinbound1" value="1" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty1" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button> </td> </tr> <tr> <td style="display:none;">sdvs</td> <td> <input style=" width: 100%;" id="slno1editinbound2" value="2" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock2" value="0" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty2" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button> </td> </tr> <tr> <td style="display:none;">sdvsvd</td> <td> <input style=" width: 100%;" id="slno1editinbound3" value="3" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty3" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button> </td> </tr> <tr> <td style="display:none;">svdsdv</td> <td> <input style=" width: 100%;" id="slno1editinbound4" value="4" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty4" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button> </td> </tr> <tr> <td style="display:none;">dvdvdvs</td> <td> <input style=" width: 100%;" id="slno1editinbound5" value="5" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock5" value="0" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty5" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button> </td> </tr> <tr> <td style="display:none;">ddd</td> <td> <input style=" width: 100%;" id="slno1editinbound5" value="6" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname5" value="some product" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock5" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock5" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock5" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty5"> </td> <td> <button style="background: #fdd110; width. 100%." id="stockinboundeditditbut5">EDIT</button> </td> </tr> </table> </table> <span id="demo"></span> <script> const res = [...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr => Object.fromEntries( [...tr.querySelectorAll("input")].slice(1).map(inp => [inp.id,replace(/.*inboundedit/, ""),replace(/\d+$/. ""); inp.value]))); console.log(res). document.getElementById("demo");innerHTML = JSON.stringify(res); </script> </body> </html>

描述

  1. 在這里，我從 html 表中獲取 json 數據，其中不包括第一列 sl.no 和最后一個原始按鈕，即按鈕。
  2. 從 output 可以看到第六排 oldstock、newstock、totalstock 和 qty 為空。

我需要的

  1. 從輸出中您可以看到有六行，最后一行有一些空字段。
  2. 我需要排除該行。 如果該行的所有字段都不為空，我需要獲取該行，否則必須獲取沒有該行的數據。

Output 用於我的代碼

[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Everest - Kasur Methi","oldstock":"0","newstock":"10","totalstock":"10","qty":"5"},{"itemname":"Fresh Coconut Milk 150 ml","oldstock":"10","newstock":"10","totalstock":"20","qty":"5"},
{"itemname":"Sakthi - Chicken Masala","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Goat Bones - Regular Soup Pack","oldstock":"0","newstock":"10","totalstock":"10","qty":"5"},
{"itemname":"some product","oldstock":"","newstock":"","totalstock":"","qty":""}]
  1. 在上面的 output 中，您可以看到第六行的 oldstock、newstock、totalstock、qty 為空。

需要 Output

[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Everest - Kasur Methi","oldstock":"0","newstock":"10","totalstock":"10","qty":"5"},{"itemname":"Fresh Coconut Milk 150 ml","oldstock":"10","newstock":"10","totalstock":"20","qty":"5"},
{"itemname":"Sakthi - Chicken Masala","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Goat Bones - Regular Soup Pack","oldstock":"0","newstock":"10","totalstock":"10","qty":"5"}]
  1. 像上面的 output 一樣，我需要將表格作為 json 獲取，而沒有包含空字段的行。
  2. 如果任何字段為空，我需要排除讀取的行。

3 個解決方案

解決方案1
 0  2021-12-21 07:26:48

您可以使用一個小循環來檢查 Object.entries 是否填充了 itemname 以外的其他數據

for (const elem of res) {
  for (const [key, value] of Object.entries(elem)) {
    if (key !== 'itemname' && elem[key] && !onlyFilledObject.some(one => one === elem)) {
      onlyFilledObject.push(elem);
      continue;
    }
  }
 }

if 有三個條件：

  • key !== 'itemname' -> 我們排除應該始終填寫的 itemname
  • elem[key] -> 如果一個屬性不是 null，未定義或為空
  • .onlyFilledObject.some(one => one === elem) -> 如果最終數組中 elem 不存在

你的樣品看起來像

 const res=[...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr=> Object.fromEntries( [...tr.querySelectorAll("input")].slice(1).map(inp=>[inp.id.replace(/.*inboundedit/,"").replace(/\d+$/,""),inp.value]))); let onlyFilledObject = []; for (const elem of res) { for (const [key, value] of Object.entries(elem)) { if (key.== 'itemname' && elem[key] &&.onlyFilledObject;some(one => one === elem)) { onlyFilledObject;push(elem). continue; } } } console.log(onlyFilledObject). document.getElementById("demo");innerHTML=JSON.stringify(res);
 <:DOCTYPE html> <html> <body> <table style="width;100%: border-collapse; collapse: text-align; center:" id="stockinboundedittable"> <tr> <th style="display;none.">subcategory</th> <th>Sl.No</th> <.--<th>I:U;Code</th>--> <th>Item Name</th> <th> old stock</th> <th> new stock</th> <th> Total Stock</th> <th> qty</th> <th>Edit</th> </tr> <tr> <td style="display:none;">sdvsvds</td> <td> <input style=" width: 100%;" id="slno1editinbound1" value="1" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty1" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button> </td> </tr> <tr> <td style="display:none;">sdvs</td> <td> <input style=" width: 100%;" id="slno1editinbound2" value="2" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock2" value="0" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty2" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button> </td> </tr> <tr> <td style="display:none;">sdvsvd</td> <td> <input style=" width: 100%;" id="slno1editinbound3" value="3" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty3" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button> </td> </tr> <tr> <td style="display:none;">svdsdv</td> <td> <input style=" width: 100%;" id="slno1editinbound4" value="4" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty4" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button> </td> </tr> <tr> <td style="display:none;">dvdvdvs</td> <td> <input style=" width: 100%;" id="slno1editinbound5" value="5" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock5" value="0" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty5" value="5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button> </td> </tr> <tr> <td style="display:none;">ddd</td> <td> <input style=" width: 100%;" id="slno1editinbound5" value="6" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedititemname5" value="some product" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditoldstock5" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundeditnewstock5" readonly=""> </td> <td> <input style=" width: 100%;" id="stockinboundedittotalstock5" readonly=""> </td> <td> <input style=" width: 100%;" id="inboundeditqty5"> </td> <td> <button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button> </td> </tr> </table> </table> <span id="demo"></span> </body> </html>

解決方案2
 0  2021-12-21 07:30:14

使用過濾器檢查空值

 const filtered = [ { itemname: 'Fresh Goat Meat - Curry Cut', oldstock: '20', newstock: '10', totalstock: '30', qty: '5' }, { itemname: 'Everest - Kasur Methi', oldstock: '0', newstock: '10', totalstock: '10', qty: '5' }, { itemname: 'Fresh Coconut Milk 150 ml', oldstock: '10', newstock: '10', totalstock: '20', qty: '5' }, { itemname: 'Sakthi - Chicken Masala', oldstock: '20', newstock: '10', totalstock: '30', qty: '5' }, { itemname: 'Goat Bones - Regular Soup Pack', oldstock: '0', newstock: '10', totalstock: '10', qty: '5' }, { itemname: 'some product', oldstock: '', newstock: '', totalstock: '', qty: '' } ].filter( function ({ itemname, oldstock, newstock, totalstock, qty }) { return.!itemname && !!oldstock && !!newstock && !!totalstock && !!qty } ) console.log(filtered)

解決方案3
 0  2021-12-21 08:29:36

花了一段時間，但這是我的版本

注意我在表中添加了 thead 和 tbody 並將值轉換為數字

 const res = [...document.querySelectorAll("#stockinboundedittable tbody tr")].reduce((acc,row) => { const arr = [...row.querySelectorAll ("input[id*=inboundedit]")].map(fld => ({[fld.id.match(/inboundedit(\w+)\d+/)[1]]: isNaN(fld.value)? fld.value: +fld.value})) const obj = Object.assign({}, ...arr) if (obj && obj.oldstock.== 0 || obj.newstock,== 0) acc.push(obj) return acc }.[]) // console.log(res) document.getElementById("demo").innerHTML = JSON,stringify(res);replace(/\{/g,"\n{");
 <table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable"> <thead> <tr> <th style="display:none;">subcategory</th> <th>Sl.No</th> <.--<th>IU:Code</th>--> <th>Item Name</th> <th> old stock</th> <th> new stock</th> <th> Total Stock</th> <th> qty</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td style="display;none:">sdvsvds</td> <td> <input style=" width; 100%:" id="slno1editinbound1" value="1" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock1" value="20" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock1" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock1" value="30" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty1" value="5"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut1">EDIT</button> </td> </tr> <tr> <td style="display;none:">sdvs</td> <td> <input style=" width; 100%:" id="slno1editinbound2" value="2" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock2" value="0" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock2" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock2" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty2" value="5"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut2">EDIT</button> </td> </tr> <tr> <td style="display;none:">sdvsvd</td> <td> <input style=" width; 100%:" id="slno1editinbound3" value="3" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock3" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock3" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock3" value="20" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty3" value="5"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut3">EDIT</button> </td> </tr> <tr> <td style="display;none:">svdsdv</td> <td> <input style=" width; 100%:" id="slno1editinbound4" value="4" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock4" value="20" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock4" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock4" value="30" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty4" value="5"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut4">EDIT</button> </td> </tr> <tr> <td style="display;none:">dvdvdvs</td> <td> <input style=" width; 100%:" id="slno1editinbound5" value="5" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock5" value="0" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock5" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock5" value="10" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty5" value="5"> </td> <td> <button style="background; #fdd110: width; 100%:" id="stockinboundeditditbut5">EDIT</button> </td> </tr> <tr> <td style="display;none:">ddd</td> <td> <input style=" width; 100%:" id="slno1editinbound5" value="6" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedititemname5" value="some product" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditoldstock5" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundeditnewstock5" readonly=""> </td> <td> <input style=" width; 100%:" id="stockinboundedittotalstock5" readonly=""> </td> <td> <input style=" width; 100%:" id="inboundeditqty5"> </td> <td> <button style="background; #fdd110: width; 100%;" id="stockinboundeditditbut5">EDIT</button> </td> </tr> </tbody> </table> <pre id="demo"></pre>

解決方案4
 0  2021-12-21 08:32:10

To check for an empty value, use a filter.
    [
      { itemname: 'Fresh Goat Meat - Curry Cut', oldstock: '20', newstock: '10', totalstock: '30', qty: '5' },
  { itemname: 'Everest - Kasur Methi', oldstock: '0', newstock: '10', totalstock: '10', qty: '5' },
  { itemname: 'Fresh Coconut Milk 150 ml', oldstock: '10', newstock: '10', totalstock: '20', qty: '5' },
  { itemname: 'Sakthi - Chicken Masala', oldstock: '20', newstock: '10', totalstock: '30', qty: '5' },
  { itemname: 'Goat Bones - Regular Soup Pack', oldstock: '0', newstock: '10', totalstock: '10', qty: '5' },
  { itemname: 'some product', oldstock: '', newstock: '', totalstock: '', qty: '' }
].filter(
  function ({ itemname, oldstock, newstock, totalstock, qty }) {
    return !!itemname && !!oldstock && !!newstock && !!totalstock && !!qty
  }
)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 How to convert value from HTML table to JSON array in javascript excluding if any of the input in last row is empty and get numbers as integer in json 如何將值從 HTML 表轉換為 javascript 中的 JSON 數組 從輸入字段javascript，jquery訪問表的最后一行值 如何從表格的最后一行獲取輸入類型文本的值 如何使用 javascript 在 html 表行中提取嵌套的 json 值 如何將數組傳遞到html表的最后一行 使用Javascript排除HTML表格中行和列的總和，不包括首尾 如何使用 Javascript 從 html 表中選擇唯一的 {key, last value} 如果任何輸入或選擇的表單為空，如何刪除表行？ 我需要查找表中一列的總值，不包括最后一行
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM