Remove From My Forums

Need help write jQuery request Web API Data

Question

User-557095619 posted

I'm jQuery Newbies. I've Web API URL & Data as following,

Web API need (1) Query String Parameter named - id. Let's say, id=2018637836008. My html as below,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Request API</title>
</head>
<body>

    <table>
        <tr><td>Payment Receiver:</td><td>&nbsp;???</td></tr>
        <tr><td>Person Name:</td><td>&nbsp;???</td></tr>
        <tr><td>Amout To Pay:</td><td>&nbsp;???</td></tr>
    </table>
</body>
</html>

How to replace ???, ???, ??? with appropriate value based Web API Parameter?

Please help

Tuesday, September 8, 2020 10:46 PM

Answers

User1686398519 posted

Hi bonusnet,

bonusnet
how jQuery assign in PAGE LOAD

You can put the js code in $( document ).ready(function() {}); so that the code contained in it will run as soon as the entire page is loaded.

Note:

I set a breakpoint in the browser (open with F12) to show you how to add data to the page (use F10 to execute step by step). You can view the animation below to better help you understand.
If you want to use jquery better, first you need to have some understanding of javascript. You can click here to learn about learning javascript.You can click here to learn more about using jquery.

@{ Layout = null;}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div id="result"></div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/api/payment/GetPaymentById",
            data: { id: "2018637836007" },
            success: function (data) {
                $("#result").empty();
                if (data != null) {
                    $.each(data, function (key, value) {
                        var label = "<label for=" + key + ">" + value + "</label> ";
                        $("#result").append(label);
                    });
                }
            },
            failure: function (data) {
                alert(data.responseText);
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    });
</script>

Best Regards,

YihuiSun

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, September 10, 2020 8:47 AM

All replies

User1686398519 posted

Hi bonusnet,

I haven't reproduced your problem, can you provide the relevant code for your request api?
I wrote an example, you can refer to it.

Model

    public class PaymentModel
    {
        public long PaymentId{ get; set; }
        public string PaymentReceiver{ get; set; }
        public string PersonNme { get; set; }
        public int UniqueId { get; set; }
        public decimal Amt { get; set; }
    }

Controller

        public PaymentModel GetPaymentById(long id)
        {
            PaymentModel test = new PaymentModel
            {
                PaymentId = 208637836008,
                Amt = Decimal.Parse("260.50"),
                PaymentReceiver = "BENDAHARI UNIVERSITI TKNOLOGI MARA",
                PersonNme = "NURUL NASUHA BINTI ZAHARI",
                UniqueId = 0
            };
            return test;
        }

View

@{ Layout=null;}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<button id="requesttest">request</button>
<table class="table table-bordered" id="tabeltest">
    <thead></thead>
    <tbody></tbody>
</table>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script>
    $("#requesttest").click(function(){
        $.ajax({
            type: "GET",
            url: "/api/payment/GetPaymentById",
            data: { id: 2018637836008 },
            success: function (data) {
                $("#tabeltest tbody").empty();
                $.each(data, function (key, value) {
                    $("#tabeltest tbody").append("<tr><td>" + key + ":</td><td>&nbsp;" + value + "</td></tr>");
                });
            },
            failure: function (data) {
                alert(data.responseText);
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    });
</script>

Here is the result.

Best Regards,

YihuiSun

Wednesday, September 9, 2020 8:00 AM

0

Sign in to vote
User-557095619 posted

Hi Yishun,

I need help as following,

How jQuery request Query String parameter?
How jQuery store the Query String value?
How jQuery pass the value to Web API?
How jQuery get result and place it into html?

Please help
Wednesday, September 9, 2020 8:10 AM
0

Sign in to vote
User1686398519 posted

Hi bonusnet,

How jQuery request Query String parameter?|How jQuery pass the value to Web API?

Use jquery ajax to make the request.
In the example provided earlier, id is the parameter you want to pass.

url: "/api/payment/GetPaymentById", data: { id: 2018637836008 }

How jQuery store the Query String value?

Do you mean you want to store the parameter id?Where do you want to store it?

How jQuery get result and place it into html?

After the ajax request is successful, add the obtained data to the table named tabeltest.

<table class="table table-bordered" id="tabeltest"> <thead></thead> <tbody></tbody> </table>

success: function (data) { $("#tabeltest tbody").empty(); $.each(data, function (key, value) { $("#tabeltest tbody").append("<tr><td>" + key + ":</td><td> " + value + "</td></tr>"); }); }

Best Regards,

YihuiSun
Thursday, September 10, 2020 1:54 AM
0

Sign in to vote

User-557095619 posted

Hi YihuiSun,

I made new posting. Can you help me at - https://forums.asp.net/t/2170601.aspx?Need+help+on+Entity+Framework

Please help

Thursday, September 10, 2020 1:56 AM
0

Sign in to vote

User1686398519 posted

Hi bonusnet,

Has your previous problem been solved?I suggest you could mark the answer which is helpful. This will help other people who faces the same issue to find the right answer faster.

Best Regards,

YihuiSun

Thursday, September 10, 2020 2:03 AM
0

Sign in to vote
User-557095619 posted

Hi bonusnet,

Has your previous problem been solved?I suggest you could mark the answer which is helpful. This will help other people who faces the same issue to find the right answer faster.

Best Regards,

YihuiSun

Hi YihuiSun,

I need help on jQuery side. The Web API always return 1 row only. Can you show me,

How jQuery request Web API and paste the value using Label tag?

<label for="PaymentId"></label> <label for="PersonNme"></label> <label for="PaymentReceiver"></label> <label for="Amt"></label>

Please help
Thursday, September 10, 2020 2:28 AM

User1686398519 posted

Hi bonusnet,

The Web API always return 1 row only. Can you show me,
- Do you mean that webapi only returns one piece of data?What is your question, can you make it clear?

If you don't want to use the table to display the data, and you want to use the label, you can add a div as a container and use jquery to add data.

I added input, you can modify it according to your needs.

@{ Layout = null;}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<button id="requesttest">request</button>
<div id="result"></div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script>
    $("#requesttest").click(function () {
        $.ajax({
            type: "GET",
            url: "/api/payment/GetPaymentById",
            data: { id: "2018637836007" },
            success: function (data) {
                $("#result").empty();
                if (data != null) {
                    $.each(data, function (key, value) {
                        var label = "<label for=" + key + ">" + key + "</label> ";
                        var input = "<input name=" + key + " id=" + key + " value=&nbsp;" + value + "><br>";
                        $("#result").append(label);
                        $("#result").append(input);
                    });
                } else {
                    alert($("#searchcontent").val() + " is not exsist.");
                }
            },
            failure: function (data) {
                alert(data.responseText);
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    });
</script>

Here is the result.

Best Regards,

YihuiSun

Thursday, September 10, 2020 5:42 AM

0

Sign in to vote
User-557095619 posted

Hi YihuiSun,

Yes. Every jQuery send parameter ( id ), it only return 1 row of data. PaymentId | PaymentReceiver | PersonNme | Amt

This return, how jQuery assign in PAGE LOAD. Your sample is button click. I need sample in PAGE LOAD

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Request API</title> </head> <body>
Payment Id:<label id="PaymentId"></label><br>
Receiver:<label id="PaymentReceiver"></label><br>
Person Name:<label id="PersonNme"></label><br>
Amout:<label id="Amt"></label><br>
</body> </html>

Please help
Thursday, September 10, 2020 6:13 AM

User1686398519 posted

Hi bonusnet,

bonusnet
how jQuery assign in PAGE LOAD

You can put the js code in $( document ).ready(function() {}); so that the code contained in it will run as soon as the entire page is loaded.

Note:

I set a breakpoint in the browser (open with F12) to show you how to add data to the page (use F10 to execute step by step). You can view the animation below to better help you understand.
If you want to use jquery better, first you need to have some understanding of javascript. You can click here to learn about learning javascript.You can click here to learn more about using jquery.

@{ Layout = null;}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div id="result"></div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/api/payment/GetPaymentById",
            data: { id: "2018637836007" },
            success: function (data) {
                $("#result").empty();
                if (data != null) {
                    $.each(data, function (key, value) {
                        var label = "<label for=" + key + ">" + value + "</label> ";
                        $("#result").append(label);
                    });
                }
            },
            failure: function (data) {
                alert(data.responseText);
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    });
</script>

Best Regards,

YihuiSun

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, September 10, 2020 8:47 AM

User-557095619 posted

Hi YihuiSun,

I follow your code and make it few amendment. Here the result,

<body>

    Payment Id:&nbsp;<div id="PaymentId"></div><br>
    Receiver:&nbsp;<div id="PaymentReceiver"></div><br>
    Person Name:&nbsp;<div id="PersonNme"></div><br>
    Amout:&nbsp;<div id="Amount"></div><br>

    <script>
        var getParams = getUrlParameter('id');

        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/api/payment/GetPaymentById",
                data: { id: getParams },
                success: function (data) {
                    $("#result").empty();
                    if (data != null) {
                        $.each(data, function (key, value) {
                            
                            $("#PaymentId").text(value);
                            $("#PaymentReceiver").text(value);
                            $("#PersonNme").text(value);
                            $("#Amount").text(value);

                        });
                    }
                },
                failure: function (data) {
                    alert(data.responseText);
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        });
    </script>


</body>

Looks like, it's not paste in accurate <div> statement. Web API is fine

Need help adjust jQuery Loop

Friday, September 11, 2020 4:42 AM

0

Sign in to vote

User-557095619 posted

Please help

Sunday, September 13, 2020 7:56 AM
0

Sign in to vote

User-474980206 posted

What did you expect? There are 4 fields. In the loop you set these files to the loop item values, or course they will be the values of the last item in the loop.

Sunday, September 13, 2020 7:33 PM

User-557095619 posted

Frankly speaking, I really don't know - How the jQuery syntax looks like. So far, I've this

  <script>
        var getParams = getUrlParameter('id');

        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "/api/payment/GetPaymentById",
                data: { id: getParams },
                success: function (data) {
                    $("#result").empty();                                     

                    $("#PaymentId").text(val.PaymentId);
                    $("#PaymentReceiver").text(val.PaymentReceiver);
                    $("#PersonNme").text(val.PersonNme);
                    $("#Amount").text(val.Amt);

                },
                failure: function (data) {
                    alert(data.responseText);
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        });
    </script>

Unfortunately, no value return

Please help

Monday, September 14, 2020 6:57 AM

Answered by:

Need help write jQuery request Web API Data

Question

Answers

bonusnet

All replies

bonusnet