Доступ к данным ответа функции успешного обратного вызова ajax

Question

Я вернул list<object> из моего контроллера, он успешно записан в success() в ajax, так как это список, в котором может быть n-количество объектов, я хочу динамически создавать табличные данные и заполнять их, повторяя data, но я не могу получить доступ к элементам внутри data объекта, как показывают данные консоли, фактические элементы обернуты внутри внешнего объекта, а мой цикл for - внешний.пожалуйста, смотрите прикрепленный скриншот

Пожалуйста, обратитесь к этой ссылке для ссылки на изображение: Журнал консоли

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

MyКод контроллера:

@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, поэтому я хочу повторить иЯ хочу, чтобы семь строк и соответствующие им столбцы были заполнены значениями.Пожалуйста, предложите мне решение.

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>>.

Как это исправить?

Есть два способа, но я рекомендую вам второй:

1. Полагаю, вы хотелидобавить всех элементов к внешнему List и сохранить плоскую структуру.Для этого вы должны использовать метод List::addAll, который передает все элементы из List в другой.Вы использовали List::add, который добавляет элемент в список как есть - в вашем случае добавленный элемент был новым целым List, а не его элементами.

2. Лучший способ - вернуть результат напрямую.Если ничего не найдено, верните пустое 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 используется для отправки данных на сервер для создания/ обновить ресурс.