iterate over list of objects in jquery : i'm trying to some work around , i have to send ajax request to ajax and get array of objects in format of json, what i can't do is how to iterate over this list and add the data to html table : 

jsp page :

    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
        </head>    
        <body>
            <button id="but">click me </button>
            <div id="test">
    
            </div>
            <script>
    
                $(document).on("click", "#but", function () {  // When HTML DOM "click" event is invoked on element with ID "somebutton", execute the following function...
                    $.get("testServlet", function (responseJson) {    // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response JSON...
                        var $ul = $("<table>").appendTo($("#test")); // Create HTML <ul> element and append it to HTML DOM element with ID "somediv".
                        console.log(responseJson);
                        $.each(responseJson, function (index, item) { // Iterate over the JSON array.
                           $("<tr>").appendTo($ul)
                                    .apeend($("<td>").text(item.id).appendTo($ul))// Create HTML <li> element, set its text content with currently iterated item and append it to the <ul>.
                                    .apeend($("<td>").text(item.fname).appendTo($ul))
                                    .apeend($("<td>").text(item.lname).appendTo($ul));
                        });
                    });
                });
            </script>
        </body>
    </html>

 servlet.java 

 

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setContentType("text/html;charset=UTF-8");
            user u = new user(1, "john", "doe");
            user u1 = new user(2, "foo", "foo");
            user u2 = new user(3, "bar", "bar");
    
            List<user> list = new ArrayList<>();
            list.add(u);
            list.add(u1);
            list.add(u2);
            String json = new Gson().toJson(list);
    
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(json);
        }

the output is like that :

[![enter image description here][1]][1]

and the console shows that error ? 

    Uncaught TypeError: $(...).appendTo(...).apeend is not a function
        at Object.<anonymous> (test2.jsp:23)
        at Function.each (jquery-3.2.1.min.js:2)
        at Object.success (test2.jsp:21)
        at i (jquery-3.2.1.min.js:2)
        at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
        at A (jquery-3.2.1.min.js:4)
        at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)


  [1]: https://i.stack.imgur.com/vcYzE.png