堆栈内存溢出
  繁体   English   中英

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

 原文  2021-12-22 05:25:37  4   2    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="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. 我已经将项目名称、新库存、旧库存、数量和总库存等所有数据作为字符串获取。
  2. 我需要 oldstock、newstock、totalstock 和数量的 json 作为 integer 和字符串中的 itemname。

Output 用于我的代码

[{"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. 如您所见，我当前代码的 output 包含所有数据作为字符串。

Output 我需要

[{"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. 从示例中可以看出 output oldstock、newstock、totalstock 和 qty 在 integer 中，itemname 在字符串中

2 个解决方案

解决方案1
 0 已采纳  2021-12-22 05:33:15

您需要对数据使用 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);

解决方案2
 0  2021-12-22 05:48:57

尝试以下：

    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;

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将 HTML 表中的值转换为 javascript 中的 JSON 数组，不包括最后一行中的任何输入是否为空 如何将值从 HTML 表转换为 javascript 中的 JSON 数组 如何使用 javascript 在 html 表行中提取嵌套的 json 值 如何从表格的最后一行获取输入类型文本的值 从 HTML 获取用户输入并在 JSON 数组中搜索值 如何使用JavaScript从JSON数组获取JSON值 如何使用 javascript 将 json 值转换为 html？ 如何在html输入中显示json数组值 如何在JavaScript中将序列化数组值转换为JSON 从输入字段javascript，jquery访问表的最后一行值
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM