Home > other >  How to convert value from HTML table to JSON array in javascript excluding if any of the input in la
How to convert value from HTML table to JSON array in javascript excluding if any of the input in la

Time：12-22

<!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.

CodePudding user response：

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>

CodePudding user response：

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>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>
  </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>

CodePudding user response：

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)

Page link：https//www.codepudding.com/other/236036.html

Prev:How do I create a triangle between two divs? CSS
Next:How to make color background full
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding