访问ajax成功回调函数的响应数据

Question

I returned a list<object> from my controller,it successfully captured in ajax's success() , as it is list so it can have n-number of objects, I want to create tabular data dynamically and populated the same by iterating data , but I am not able to access the elements inside data object, as console data shows, the actual elements are wrapped inside an outer object and my for loop outer one. please see the screenshot attached

Please refer to this link for image reference: Console log

Ajax call of the controller:

function getSelectedTableRecords(tableId) {

    if (tableId != null && tableId != '') {
        $.ajax({
            type: "POST",
            url: baseUrl + "search",
            data: {
                tableId: tableId
            },
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    $('#applicationList > tbody').append(
                        '<tr>'
                        + '<td><h4>' + item.userId + '</h4></td>'
                        + '<td><h4>' + item.firstName + '</h4></td>'
                        + '<td><h4>' + item.lastName + '</h4></td>'
                        + '<td><h4>' + item.rollNo + '</h4></td>'
                        + '<td><h4>' + item.contact + '</h4></td>'
                        + '<td><h4>' + item.email + '</h4></td>'
                        + '<td><h4>' + item.gender + '</h4></td>'
                        + '</tr>');
                    insideData(data);
                }
            },
            fail: function (data) {
                alert('Failed to fetch records.');
            }
        });
    } else {
        // ...
    }
}

My Controller code:

@RequestMapping(value = "/search", method = RequestMethod.POST)
@ResponseBody
public List<Object> fetchTableData(@RequestParam("tableId") String tableId) {
   List<Object> userList = new ArrayList<>();
   try {
       System.out.println(" table id id " + tableId);
       if (tableId != null) {
           List<UserInfo> l = userInfoDao.findById(tableId);
           userList.add(l);
       }
       return userList;
   } catch (Exception e) {
       e.printStackTrace();
       return null;
   }
}

As per screenshot, I only got one row with all undefined values, what I want to do, in the image I have 7 elements, so I want to iterate and I want seven rows and their corresponding columns populated with values. Please suggest me the solution.

Answer 1

Well, as far as I see from your log, the structure is an array of array. An element might be accessible using:

success: function (data) {
    for (var i = 0; i < data[0].length; i++) {  // access the first item data[0] of outer array
         var item = data[0][i];                 // and get the nth object
         $('#applicationList > tbody').append(
            // code skipped
         );
         insideData(data);
    }
},

Why does it happen?

Because you return List<Object> which has one element List<UserInfo> . This brief sequence of operation adds a list to a list and returns it:

List<Object> userList = new ArrayList<>();           // Creates a List
List<UserInfo> l = userInfoDao.findById(tableId);    // Creates another of users
userList.add(l);                                     // Adds List to List
return userList;                                     // Returns the List to List

Since the return type is List<Object> , you might not notice that the returned type is actually List<List<UserInfo>> .

How to fix it?

There are two ways, yet I recommend you the second one:

1. I suppose that you wanted to add all the elements to the outer List and keep the flat structure. For this, you have to use method List::addAll which passes all the elements from the List to another one. You have used List::add which adds an element to the list as is - in your case the added element was a new entire List and not its elements.

2. A better way is to return the result directly. If nothing is found, return an empty List :

    @RequestMapping(value = "/search", method = RequestMethod.GET) @ResponseBody public List<UserInfo> fetchTableData(@RequestParam("tableId") String tableId) { try { List<UserInfo> userList = new ArrayList<>(); System.out.println(" table id id " + tableId); if (tableId != null) { userList = userInfoDao.findById(tableId); } return userList; } catch (Exception e) { // log it, don't print the stacktrace... return Collections.emptyList() } } 

What more?

I noticed you use the POST method, however since you receive data from the server, you should use GET method regardless you pass a parameter which identifies the entity to be returned. From W3Schools :

• GET is used to request data from a specified resource.
• POST is used to send data to a server to create/update a resource.