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

Description描述

  1. Here I have been getting json data from an html table with excluding sl.no which is first column and also excluding the last raw which is button.在这里，我从 html 表中获取 json 数据，其中不包括第一列 sl.no 和最后一个原始按钮，即按钮。
  2. from the output you can see that in sixth row oldstock, newstock, totalstock and qty are empty.从 output 可以看到第六排 oldstock、newstock、totalstock 和 qty 为空。

What I need我需要的

  1. From the out put you can see that there are six rows and last row has some empty field.从输出中您可以看到有六行，最后一行有一些空字段。
  2. I need to exclude that row.我需要排除该行。 I need to get the row if that row row has all fields not empty otherwise have to get the data without the row.如果该行的所有字段都不为空，我需要获取该行，否则必须获取没有该行的数据。

Output for my code 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. In the above output you can see there a sixth row with the oldstock, newstock, totalstock, qty are empty.在上面的 output 中，您可以看到第六行的 oldstock、newstock、totalstock、qty 为空。

Needed Output需要 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. Like the above output I need to get the table as json without the row which has empty fields.像上面的 output 一样，我需要将表格作为 json 获取，而没有包含空字段的行。
  2. I need to exclude the row for reading if any of the field is empty.如果任何字段为空，我需要排除读取的行。

3 个解决方案

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

you can do it with a small loop that check in Object.entries if one other data than itemname is filled您可以使用一个小循环来检查 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;
    }
  }
 }

the if have three conditions: if 有三个条件：

  • key !== 'itemname' -> we exclude the itemname that should be always fill key !== 'itemname' -> 我们排除应该始终填写的 itemname
  • elem[key] -> if one property is not null, undefined or empty elem[key] -> 如果一个属性不是 null，未定义或为空
  • .onlyFilledObject.some(one => one === elem) -> if elem is not already present if final array .onlyFilledObject.some(one => one === elem) -> 如果最终数组中 elem 不存在

with your sample it look like你的样品看起来像

 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

Use filter to check empty value使用过滤器检查空值

 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

Took a while but here is my version花了一段时间，但这是我的版本

Note I added thead and tbody to the table and converted the values to numbers注意我在表中添加了 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 - 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 数组 - How to convert value from HTML table to JSON array in javascript 从输入字段javascript，jquery访问表的最后一行值 - Access Table Last Row Value from input field javascript, Jquery 如何从表格的最后一行获取输入类型文本的值 - How to get the value of input type text from the last row of a table 如何使用 javascript 在 html 表行中提取嵌套的 json 值 - How to extract nested json value in a html table row using javascript 如何将数组传递到html表的最后一行 - How to pass an array into html table last row 使用Javascript排除HTML表格中行和列的总和，不包括首尾 - Sum Total of Row and Column in HTML Table using Javascript Excluding First and Last 如何使用 Javascript 从 html 表中选择唯一的 {key, last value} - How to select unique {key, last value} from html table with Javascript 如果任何输入或选择的表单为空，如何删除表行？ - How to remove table row if the form any of the input or select was empty? 我需要查找表中一列的总值，不包括最后一行 - I need to find the total value of a column in a table, excluding the last row
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM