data not appearing in front end using ajax

user_18702081 0
Viewed 42

I'm trying to connect between backend and frontend using ajax get, every thing work successfully but in front end nothing appears, but in console results shown, why that and what is the problem ?

This is my html file :

<body>
<div id="postResultDiv" align="center"></div>
<div class="container">
    <h2>Stacked form</h2>
    <form id="customerForm">
        <div class="form-group">
            <label for="serialNumber">serialNumber:</label> <input type="text" class="form-control" id="serialNumber" placeholder="Enter serialNumber" name="serialNumber">
        </div>
        <div class="form-group">
            <label for="firstName">firstName:</label> <input type="text" class="form-control" id="firstName" placeholder="Enter firstName" name="firstName">
        </div>
        <div class="form-group">
            <label for="lastName">lastName :</label> <input type="text" class="form-control" id="lastName" placeholder="Enter lastName" name="lastName">
        </div>
        <div class="form-group">
            <label for="email">email :</label> <input type="text" class="form-control" id="email" placeholder="Enter email" name="lastName">
        </div>
        <div class="form-group">
            <label for="mobileNumber">mobileNumber :</label> <input type="text" class="form-control" id="mobileNumber" placeholder="Enter mobileNumber" name="mobileNumber">
        </div>
        <div class="form-group form-check">
            <label class="form-check-label"> <input
                    class="form-check-input" type="checkbox" name="remember">
                Remember me
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br />
    <div class="col-sm-7" style="margin: 20px 0px 20px 0px">
        <button id="getALlCustomers" type="button" class="btn btn-primary">Get
            All Customers</button>
        <div id="getResultDiv" style="padding: 20px 10px 20px 50px">
            <ul class="list-group">
            </ul>
        </div>
    </div>
</div>
</body>

This is my js (ajax) file :

GET: $(document).ready(
        function() {

            // GET REQUEST
            $("#getALlCustomers").click(function(event) {
                event.preventDefault();
                ajaxGet();
            });

            // DO GET
            function ajaxGet() {
                $.ajax({
                    type : "GET",
                    url : "getCustomers",
                    success : function(result) {
                        if (result.status == "success") {
                            $('#getResultDiv ul').empty();
                            $.each(result.data,
                                    function(i, getALlCustomers) {
                                        var user = "customer Name  "
                                                + customer.firstName
                                                + ", email  = " + customer.email
                                                + "<br>";
                                        $('#getResultDiv .list-group').append(
                                                customer)
                                    });
                            console.log("Success: ", result);
                        } else {
                            $("#getResultDiv").html("<strong>Error</strong>");
                            console.log("Fail: ", result);
                        }
                    },
                    error : function(e) {
                        $("#getResultDiv").html("<strong>Error</strong>");
                        console.log("ERROR: ", e);
                    }
                });
            }
        })

Data retrieve correct but no data in ui :

enter image description here

This my front and no data shown on it :

enter image description here

Any one have an idea where is the problem ?

html jquery ajax javascript
1 Answers

I think the issue in the $each function, is because you name the item parameter as "getALlCustomers" but you use it as "customer", and instead of appending the "user" variable, you append "customer" variable which does already not exist.

Replace the $each function with the code below.

$.each(result.data, function (i, customer) {
        var user =
            "customer Name  " +
            customer.firstName +
            ", email  = " +
            customer.email +
            "<br>";
        $("#getResultDiv .list-group").append(user);
    });
user_118879020
Related