如何用javascript将HTML表中的值转换为JSON数组,排除最后一行中的任何输入为空,并在JSON中获取整数



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

说明

  1. 正如您从上面的代码中看到的,我一直在从html表中获取json
  2. 如果oldstock为非空且非零且nestock为非空,则一直在进行筛选
  3. 所有json数据都是字符串形式

我需要什么

  1. 我一直在以字符串的形式获取所有数据,如itemname、newstock、oldstock、qty和total stock
  2. 我需要oldstock、newstock、totalstock和qty的json作为整数和字符串中的itemname

我的代码的输出

[{"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"}]

描述:

  1. 正如您所看到的,我当前代码的输出包含字符串形式的所有数据

我需要的输出

[{"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}]

描述:

  1. 从示例输出中可以看到,oldstock、newstock、totalstock和qty是整数,itemname是字符串

您需要在数据上使用for循环,如下所示。

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

尝试以下操作:

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;

最新更新