How to convert value from HTML table to JSON array in javascript excluding if any of the input in la-CodePudding

<!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="10" 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="10" 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" value="1"  readonly="">
    </td>
    <td>
      <input style="    width: 100%;" id="stockinboundeditnewstock5" value="1" readonly="">
    </td>
    <td>
    <input style="    width: 100%;" id="stockinboundedittotalstock5" value="0" readonly="">
    </td>
    <td>
      <input style="    width: 100%;" id="inboundeditqty5" value="0">
    </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]))).filter(
  function ({ oldstock, newstock}) {
    return  (oldstock!="" && newstock!="")&&(oldstock!="0" && newstock!="") 
  }
);

var js=JSON.stringify(res);
document.getElementById("demo").innerHTML=js;
</script>

</body>
</html>

Description

As you can see from above code I have been getting json from html table.
And have been filtering if the oldstock is non empty and non zero and nestock is non empty
All the json data are in string.

What I need

I have been getting all the data like itemname,newstock,oldstock,qty, and total stock as String.
I need json of oldstock, newstock, totalstock and qty as integer and itemname in string.

Output for my code

[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Everest - Kasur Methi","oldstock":"10","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":"10","newstock":"10","totalstock":"10","qty":"5"},
{"itemname":"some product","oldstock":"1","newstock":"1","totalstock":"0","qty":"0"}]

Description:

As you can see the output for my current code contains all the data as string.

Output I Need

[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":20,"newstock":10,"totalstock":30,"qty":5},
    {"itemname":"Everest - Kasur Methi","oldstock":10,"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":10,"newstock":10,"totalstock":10,"qty":5},
    {"itemname":"some product","oldstock":1,"newstock":1,"totalstock":0,"qty":0}]

Description:

As you can see from the sample output oldstock, newstock, totalstock and qty are in integer and itemname are in string

CodePudding user response：

You need to use for loop on data as below.

// input data json 
const data = [{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"}] 
    let formattedData = [];
        for (const currentVal of data){
            let currentObj = currentVal;
            if(parseInt(currentVal['oldstock]) >= 0) {
                currentObj['oldstock] = parseInt(currentVal['oldstock])
            }
            if(parseInt(currentVal['newstock]) >= 0) {
                currentObj['newstock] = parseInt(currentVal['newstock])
            }
            if(parseInt(currentVal['totalstock]) >= 0) {
                currentObj['totalstock] = parseInt(currentVal['totalstock])
            }
            if(parseInt(currentVal['qty]) >= 0) {
                currentObj['qty] = parseInt(currentVal['qty])
            }
            formattedData.push(currentObj);
        }
        // Should print number type as you want
        console.log('formatted data ', formattedData);

CodePudding user response：

try following:

    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.id.indexOf('itemname') >= 0 ? inp.value : parseInt(inp.value))
                    ]))).filter(
                        function ({ oldstock, newstock }) {
                            return (oldstock != "" && newstock != "") && (oldstock != "0" && newstock != "");
                        }
                    );

        var js = JSON.stringify(res);
        document.getElementById("demo").innerHTML = js;