Добавить параметры для выбора из объекта JSON
Мне нужно получить возможные варианты выбора с другого сервера, поэтому я использую AJAX, в результате я получаю json, а response.experience выглядит как
HTML
<select class = "form-control" name = "experience" id = "experience"></select>
jQuery
$.ajax({
method: 'GET',
url: 'https://example.com/dictionaries/',
})
.done(function (response) {
console.info(response.experience);
$.each(response.experience, function (key, value) {
$('#experience')
.append($("<option></option>")
.attr("value", key)
.text(value));
});
});
Но после append я получаю объект Object в настройках
Как создать варианты в моем случае? А как добавить attr selected для первого варианта?
Ответы 3
Вам не нужно использовать $.each для прохождения массива, вместо этого используйте array.forEach() или array.map(), как это:
$.ajax({
method: 'GET',
url: 'https://example.com/dictionaries/',
})
.done(function (response) {
console.info(response.experience);
// using map
$('#experience').append(
response.experience.map(function (obj) {
return $("<option/>")
.attr("value", obj.id)
.text(obj.name));
})
);
// using forEach
response.experience.forEach(function (obj) {
$('#experience')
.append(
$("<option></option>")
.attr("value", obj.id)
.text(obj.name)
);
});
});
Не могли бы вы привести пример с forEach? А как добавить attr selected для первого варианта?
@Heidel Я добавил пример forEach, но рассмотрите возможность использования map, потому что это более эффективное решение, поскольку оно вносит только одну модификацию в DOM
Спасибо, буду иметь ввиду! Я пытался использовать ваш код с map, но что-то не так с) или} в конце функции, но я не могу понять, в чем проблема.
Обновлено: вы почти близки к решению. Пожалуйста, замените value на value.name в атрибутах опций. Вот рабочий код.
$.ajax({
method: 'GET',
url: 'https://example.com/dictionaries/',
})
.done(function (response) {
console.info(response.experience);
$.each(response.experience, function (key, value) {
$('#experience')
.append($("<option></option>")
.attr("value", value.name)
.text(value.name));
});
});
из данного ответа ajax, что должно присутствовать в параметрах выбора. Я мог видеть имя, идентификатор и т. д. Если name, используйте value.name. Я обновил свой ответ, пожалуйста, проверьте его.
Вы выполняете итерацию по массиву, содержащему объект, и добавляете объекты в список выбора. Возможно, вам потребуется добавить один из ключей объекта, например: 'id'.
И функция обратного вызова функции $.each примет два параметра, текущий индекс и значение. Первым параметром всегда будет index.
Отредактируйте свой код ajax, как показано ниже:
$.ajax({
method: 'GET',
url: 'https://example.com/dictionaries/',
})
.done(function (response) {
console.info(response.experience);
$.each(response.experience, function (index,value) {
$('#experience')
.append($("<option></option>")
.attr("value", value.id) //To append id of the json object to select list
.text(value.id));
});
$('#experience').val(response.experience[0].id) // To add the selected attribute for the first option
});
$. каждый первый аргумент - это ваш индекс, а второй аргумент - ваш объект. поэтому вам нужно получить его по value.id или value.name