stackoom
  简体   繁体   中英

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  6   3    javascript/ html

Question

 <: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.
  2. from the output you can see that in sixth row oldstock, newstock, totalstock and qty are empty.

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 

[{"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.

Needed 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.
  2. I need to exclude the row for reading if any of the field is empty.

3 answers

solution1
 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

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:

  • key !== 'itemname' -> we exclude the itemname that should be always fill
  • elem[key] -> if one property is not null, undefined or empty
  • .onlyFilledObject.some(one => one === elem) -> if elem is not already present if final array

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>

solution2
 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)

solution3
 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

 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>

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question 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 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 How to extract nested json value in a html table row using javascript How to pass an array into html table last row Sum Total of Row and Column in HTML Table using Javascript Excluding First and Last 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
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM