Get multiple Data from web service using Jquery

Question

I have a web service function that returns dataTable... I want to add data from this table1 tags...

  <Table1 diffgr:id="Table11" msdata:rowOrder="0">
    <ProductID>1</ProductID><ProductName>A</ProductName><AvailableProduct>8</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table12" msdata:rowOrder="1">
    <ProductID>2</ProductID><ProductName>B</ProductName><AvailableProduct>3</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table13" msdata:rowOrder="2">
    <ProductID>3</ProductID><ProductName>C</ProductName><AvailableProduct>7</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table14" msdata:rowOrder="3">
    <ProductID>4</ProductID><ProductName>D</ProductName><AvailableProduct>0</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table15" msdata:rowOrder="4">
    <ProductID>5</ProductID><ProductName>E</ProductName><AvailableProduct>3</AvailableProduct>
    </Table1>
<Table1 diffgr:id="Table16" msdata:rowOrder="5">
    <ProductID>6</ProductID><ProductName>F</ProductName><AvailableProduct>1</AvailableProduct>
    </Table1>

and here is my Jquery Code... this won't append anything to the table how can I solve this

  $(document).ready(function () {
        $("#Btn").click(function () {
            alert();

            $.ajax({
                type: 'POST',
                url: 'WebserviceDS.asmx/GetTable',
                dataType: 'xml',
                data:"{}",
                Success: function (xml) {
                    $(xml).find('Table1').each(function () {
                        $("<tr><td>" + $(xml).find('ProductID').text() + "</td>").appendTo("table");
                        alert($(xml).find('ProductID').text());
                        $("<td>" + $(xml).find('ProductName').text() + "</td>").appendTo("table");
                        $("<td>" + $(xml).find('AvailableProduct').text() + "</td></tr>").appendTo("table");
                    })
                },
                error: function (err) {
                    alert(err);
                }

            });
            return false;
        })
    })

in these alerts, it won't show anything ..this is my HTML code

<body>

    <form id="form1" runat="server">
        <div>
            <button id="Btn">Click Me</button>
            <table>
                <tr>
                    <th>ProductID</th>
                    <th>ProductName</th>
                    <th>AvailableProduct</th>
                </tr>

            </table>
        </div>
    </form>
</body>

Can you share exact output of xml in the success callback method? Also not it should be success note Success (Assuming) TYPO while posting question — Satpal
– Satpal, Commented Nov 28, 2017 at 7:46
@Satpal sorry now i executed my last code i have "123456" in alert 0_o — Saeed Areffard
– Saeed Areffard, Commented Nov 28, 2017 at 7:59
@Satpal then i have this in result ProductID ProductName AvailableProduct 123456 123456 123456 123456 123456 123456 ABCDEF 837031 ABCDEF 837031 ABCDEF 837031 ABCDEF 837031 ABCDEF 837031 ABCDEF 837031 — Saeed Areffard
– Saeed Areffard, Commented Nov 28, 2017 at 8:00

Satpal · Accepted Answer · 2017-11-28 08:04:14Z

1

In each() use call back value to access object at index.
Create complete <TR> then append requisite <TD> child elements then finally append <TR> to Table.

Example

$(xml)
    .find('Table1')
    .each(function (index, value) {
        var tr = $('<tr>');
        tr.append($('<td>').text($(value).find('ProductID').text()));
        tr.append($('<td>').text($(value).find('ProductName').text()));
        tr.append($('<td>').text($(value).find('AvailableProduct').text()));
        tr.appendTo("table");
    });

edited Nov 28, 2017 at 8:04

answered Nov 28, 2017 at 7:39

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saeed Areffard Over a year ago

@Setpal Thank you very Much

Collectives™ on Stack Overflow

Get multiple Data from web service using Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related