Question

我从控制器返回了一个list<object>，它已成功捕获在ajax的success()中，因为它是列表，因此它可以有n个对象，我想动态创建表格数据并填充通过迭代data可以达到相同的目的，但是我无法访问data对象内部的元素，如控制台数据所示，实际元素包装在一个外部对象内部，而我的for循环外部对象。请参阅所附的屏幕截图

请参考以下链接以获取图像参考：Console log

控制器的Ajax调用：

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 {
        // ...
    }
}

我的控制器代码：

@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;
   }
}

根据屏幕截图，在图像中只有undefined个元素的情况下，我只想一行包含所有7值，所以我想进行迭代，并且希望有7行，其对应的列中填充了值。请给我建议解决方案。

Answer 1

好吧，据我从您的日志中所看到的，该结构是一个数组数组。可以使用以下元素访问元素：

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);
    }
},

为什么会发生？

因为您返回的List<Object>具有一个元素List<UserInfo>。这个简短的操作序列将一个列表添加到列表中并返回它：

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

由于返回类型为List<Object>，因此您可能不会注意到返回的类型实际上是List<List<UserInfo>>。

如何解决？

有两种方法，但是我推荐第二种方法：

我想您想将 all 元素添加到外部List并保持平坦的结构。为此，您必须使用方法List::addAll，它将所有元素从List传递到另一个元素。您已使用List::add将该元素原样添加到列表中-在您的情况下，添加的元素是一个全新的完整List而不是元素。

更好的方法是直接返回结果。如果未找到任何内容，请返回空的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()
    }
}

还有什么？

我注意到您使用了POST方法，但是由于您从服务器接收数据，因此无论您传递的参数是否标识要返回的实体，都应使用GET方法。来自W3Schools：

GET用于从指定资源请求数据。
POST用于将数据发送到服务器以创建/更新资源。

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

1 个答案: