堆栈内存溢出
  繁体   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