Каскадное выпадающее меню с использованием jQuery/AJAX возвращает неопределенные результаты, даже если я вижу массив

#jquery #ajax

Вопрос:

У меня есть скрипт jQuery, в раскрывающемся списке которого добавлен прослушиватель событий. Я также делаю вызов AJAX обработчику. Я пытаюсь заполнить другой раскрывающийся список, возвращаемый при вызове getJSON.

     <script>
        $(function () {
            debugger;
        $("#bid").on("change", function () {
            var budgetId = $(this).val();
            $("#SuiteId").empty();
            $("#SuiteId").append("<option value=''>--- Select Suite Number ---</option>");
            $.getJSON(`?handler=SuiteIdamp;budgetId=${budgetId}`, (data) => {
                $.each(data, function (i,item) {
                    $("#SuiteId").append(`<option value="${item.suiteId}">${item.suiteNo}</option>`);
                    return (i !== "result")
                });
            });
        });
    });
    </script>
}
 

Проблема, с которой я сталкиваюсь, заключается в том, как возвращаются мои данные. Например: элемент = Массив(3)

Вот содержимое моего массива

 {suiteId: 123 suiteNo: "001"}
{suiteId: 456 suiteNo: "002"}
{suiteId: 789 suiteNo: "003"}
 

Вместо этого мой метод добавления возвращает «неопределенный». Может ли кто-нибудь дать совет? Я неправильно добавляю? Я бы хотел, чтобы он отображался на основе метода обучения, который я описал ниже.

Дополнительное примечание Удаление .suiteId и .suiteNo приводит к следующим результатам выпадающего списка

 --- Select Suite Number ---
[object Object],[object Object],[object Object]
 

Ответ №1:

Когда вы удаляете .suiteId из item и входите [object Object],[object Object],[object Object] в опцию, это означает, что вы item все еще являетесь массивом, и вы неправильно зацикливаетесь data , а также причина undefined .

Поскольку вы не опубликовали свой точный data формат, который вы получаете в качестве ответа, чтобы мы могли увидеть точную структуру, которую вы можете так же быстро исправить, добавьте еще один цикл:

 $.each(data, function(i, item) {
  item.forEach(opt => {
    $("#SuiteId").append(`<option value="${opt.suiteId}">${opt.suiteNo}</option>`);
    return (i !== "result")
  })
});
 

и еще раз я говорю, что у вас есть по одному для каждого из многих, вам нужен только один, но нам нужно видеть точные выходные данные, а не только содержимое data .