locked
Generating json object from HTML Table based on column value selection. RRS feed

  • Question

  • User-1549556126 posted

    I have an HTML Table that fills the list of members from AD Groups it could be group or users. To allow changes in the table I want to create a json object out of the HTML table. So, I started with selecting the properties like name, ObjectGUID in the table appending with Date Column (Value defined by user on front end), Dropdown list column that allows me to pick only specific users. The drop down list contains 3 values : No Change, Delete & Delete on. So, if I want to keep the member in the group I would pick No Change, else if I want to delete the membership of some users today I'll change those users to Delete and set todays date in the date column. If I want to Delete the user after some days I'll specify that date and select Delete on in from of that record. The screen shot of my sample data looks somehow like this.

    Name ObjectGUID Operation (Drop Down Column) Date
    ABC 123-zzz.. No Change  
    JKL 456-bbb… Delete 2019-06-27
    MNO 789-dfff… Delete On 2019-07-07
    XYZ 963-sdf... Delete 2019-06-27

    Now the real challenge starts !! making a json object out of the values. I have worked on converting tables into json, however, putting the affected records into relevant arrays is quite unknown to me. The json object that I need to generate is in this format:

    var MemberUpdate = {

        "Delete": ["2019-06-27 | 456-bbb... | JKL", "2019-06-27 | 963-sdf... | XYZ"],

        "DeleteOn": ["2019-07-07|789-dfff...|MNO"],

        "ResultFormat": "json"
    }

    I need to bifurcate rows based on the dropdown selection into the json array objects how do I do that?

    Thursday, June 27, 2019 4:48 PM

Answers

  • User665608656 posted

    Hi vyasnikul,

    According to your description, are you implementing this function at the front end?

    I don't know what event you need to trigger to generate this JSON string, so I created a button to trigger it.

    When you finished filling out the table, you can trigger the foreground event by clicking the button to generate the JSON string.

    If there is any misunderstanding, I hope you can tell me.

    For more details , you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var MemberUpdate = {};
                var deleteArray = [];
                var deleteOnArray = [];
                $("#Button1").click(function () {
                    $("table [id*=DropDownList]").each(function () {
                        if ($(this).val() != "No Change") {
                            var name = $(this).parent().parent().children().eq(0)[0].innerText;
                            var ObjectGUID = $(this).parent().parent().children().eq(1)[0].innerText;
                            var date = $(this).parent().parent().children().eq(3)[0].firstElementChild.value;
                            var format = date + "|" + ObjectGUID + "|" + name;
                            if ($(this).val() == "Delete") {
                                deleteArray.push(format);
                            } else {
                                deleteOnArray.push(format);
                            }
                        }
                    });
                    MemberUpdate = {
                        "Delete": deleteArray,
                        "DeleteOn": deleteOnArray,
                        "ResultFormat": "json"
                    };
    
                    return false;
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <table style="width: 100%; border-collapse: collapse" border="1">
                    <tr>
                        <td>Name </td>
                        <td>ObjectGUID </td>
                        <td>Operation</td>
                        <td>Date</td>
                    </tr>
                    <tr>
                        <td>ABC</td>
                        <td>123-zzz..</td>
                        <td>
                            <asp:DropDownList ID="DropDownList1" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>JKL</td>
                        <td>456-bbb...</td>
                        <td>
                            <asp:DropDownList ID="DropDownList2" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>MNO</td>
                        <td>789-dfff..</td>
                        <td>
                            <asp:DropDownList ID="DropDownList3" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>XYZ</td>
                        <td>963-sdf...</td>
                        <td>
                            <asp:DropDownList ID="DropDownList4" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    You can test it by F12, the variable MemberUpdate is what you want.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 28, 2019 6:04 AM

All replies

  • User665608656 posted

    Hi vyasnikul,

    According to your description, are you implementing this function at the front end?

    I don't know what event you need to trigger to generate this JSON string, so I created a button to trigger it.

    When you finished filling out the table, you can trigger the foreground event by clicking the button to generate the JSON string.

    If there is any misunderstanding, I hope you can tell me.

    For more details , you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var MemberUpdate = {};
                var deleteArray = [];
                var deleteOnArray = [];
                $("#Button1").click(function () {
                    $("table [id*=DropDownList]").each(function () {
                        if ($(this).val() != "No Change") {
                            var name = $(this).parent().parent().children().eq(0)[0].innerText;
                            var ObjectGUID = $(this).parent().parent().children().eq(1)[0].innerText;
                            var date = $(this).parent().parent().children().eq(3)[0].firstElementChild.value;
                            var format = date + "|" + ObjectGUID + "|" + name;
                            if ($(this).val() == "Delete") {
                                deleteArray.push(format);
                            } else {
                                deleteOnArray.push(format);
                            }
                        }
                    });
                    MemberUpdate = {
                        "Delete": deleteArray,
                        "DeleteOn": deleteOnArray,
                        "ResultFormat": "json"
                    };
    
                    return false;
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="Button1" runat="server" Text="Button" />
                <table style="width: 100%; border-collapse: collapse" border="1">
                    <tr>
                        <td>Name </td>
                        <td>ObjectGUID </td>
                        <td>Operation</td>
                        <td>Date</td>
                    </tr>
                    <tr>
                        <td>ABC</td>
                        <td>123-zzz..</td>
                        <td>
                            <asp:DropDownList ID="DropDownList1" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>JKL</td>
                        <td>456-bbb...</td>
                        <td>
                            <asp:DropDownList ID="DropDownList2" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>MNO</td>
                        <td>789-dfff..</td>
                        <td>
                            <asp:DropDownList ID="DropDownList3" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>XYZ</td>
                        <td>963-sdf...</td>
                        <td>
                            <asp:DropDownList ID="DropDownList4" runat="server">
                                <asp:ListItem Text="No Change" Value="No Change"></asp:ListItem>
                                <asp:ListItem Text="Delete" Value="Delete"></asp:ListItem>
                                <asp:ListItem Text="Delete On" Value="Delete On"></asp:ListItem>
                            </asp:DropDownList></td>
                        <td>
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    You can test it by F12, the variable MemberUpdate is what you want.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 28, 2019 6:04 AM
  • User-1549556126 posted

    Yongqing Yu,

    Apologize for the delay this was the exact thing I was willing to learn, initially I tried to use a different concept by parsing the tr & td tags to fetch the values however, this is more efficient way plus I was finding it hard to get the value of child element textbox in the json array object. In your solution the firstElementChild.value solves the problem. 

    Thank you so much :)

    Monday, July 1, 2019 4:12 PM