Fetching JSON data on Ajax button click in .net core

Question

I am new to Ajax. Trying to fetch JSON data returned from Get webAPI from controllers but on button click nothing rendering on View.

This is how my view look like

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ulEmployees = $('#ulEmployees');
            $('#btn').click(function () {
                    var id = $(this).attr(id);
                $.ajax({
                    url: '/api/employee', type: "GET", dataType: "json",
                    data: { id: id },
                    success: function (data) {
                        ulEmployees.empty();
                        $.each(data, function (index, val) {
                            var fullName = val.FirstName + ' ' + val.LastName;
                            ulEmployees.append('<li>' + fullName + '</li>')
                        });
                    }
                });
            });

            $('#btnClear').click(function () {
                ulEmployees.empty();
            });
        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="Get All Employees" />
    <input id="btnClear" type="button" value="Clear" />
    <ul id="ulEmployees"></ul>
</body>
</html>

This is the JSON data returned by webapi

Can anyone help me what went wrong here? Thanks in advance.

There is typo near val.FirstName + ' ' + val.LastName should be val.firstName + ' ' + val.lastName; look closely for upper case and lower case in your json . — Swati
– Swati, Commented May 29, 2020 at 7:23

DevSay · Accepted Answer · 2020-05-29 10:49:31Z

1

Below should work:

    $(document).ready(function () {
    var ulEmployees = $('#ulEmployees');
    $('#btn').click(function () {
        var id = $(this).attr('id');
        fetch('/api/employee?id=' + id)
        .then((resp) => resp.json())
        .then(function(data) {
        ulEmployees.empty();
            $.each(data, function (index, val) {
                var fullName = val.firstName + ' ' + val.lastName;
                ulEmployees.append('<li>' + fullName + '</li>');
            });
        })
        .catch(function(error) {
            console.log(error);
        });

    });
});

edited May 29, 2020 at 10:49

DevSay

1,1843 gold badges18 silver badges38 bronze badges

answered May 29, 2020 at 7:37

Bijeesh K G

1812 silver badges9 bronze badges

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

4 Comments

DevSay Over a year ago

Tried this but still not getting the result.

DevSay Over a year ago

I am now getting following error Uncaught TypeError: Cannot read property 'nodeType' of undefined at init.attr (jquery.min.js:5) at Function.access (jquery.min.js:4) at init.attr (jquery.min.js:5) at HTMLInputElement.<anonymous> (emp:10) at HTMLInputElement.dispatch (jquery.min.js:5) at HTMLInputElement.v.handle (jquery.min.js:5)

Swati Over a year ago

this error is near attr because id should be in quote i.e : $(this).attr('id')

DevSay Over a year ago

@Swati this solve my error and after making the val.firstName + ' ' + val.lastName i.e. lower casing attribute, I am able to get the result. Thanks a tone. Saved my day :)

Collectives™ on Stack Overflow

Fetching JSON data on Ajax button click in .net core

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related