堆棧內存溢出
  簡體   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