JQuery: как добавить список объектов в Ajax

Я один из первых использую JQuery/AJAX, и я хотел бы получить вашу помощь, чтобы предоставить список объектов в моем раскрывающемся поле.

У меня есть такая функция:

function get_sub_method_options(keep_cur) {
  var sel_option = $('select#id_method-group').find("option:selected");
  var sel_val = sel_option.val();
  console.info(sel_val);
  if (sel_val === '') {
    console.info('none sorting group');
    $("select#id_method-sub_method").empty();
    $("select#id_method-sub_method").append('<option value = ""> test </option>'); //here add list of all submethods
    return;
  }

  data = {
    'test_method': $('select#id_method-test_method').find("option:selected").val(),
    'group': sel_val
  };
  $.ajax({
    method: "GET",
    url: '{% url 'ajax_method_submethod' %}',
    data: data

  }).done(function (result) {
    reset_select('id_method-sub_method');
    for (var i = 0; i < result['results'].length; i++) {
      if (keep_cur > 0 & keep_cur == result['results'][i].id)
        $("select#id_method-sub_method").append('<option value = "' + result['results'][i].id + '" selected>' + result['results'][i].text + '</option>');
      else
        $("select#id_method-sub_method").append('<option value = "' + result['results'][i].id + '">' + result['results'][i].text + '</option>');
    }
    ;
  });
}

И у меня есть функция Python / Django:

def ajax_method_submethod(request):
    test_method_id = request.GET.get("test_method", "")
    group_id = request.GET.get("group", "")
    sub_methods_all = SubMethod.objects.all()
    sub_methods = Method.objects.filter(test_method_id=test_method_id).filter(
        group_id=group_id
    )

    results2 = []
    for item in sub_methods_all:
        results2.append({'id': item.id, 'text': item.name})
    print(results2)

    results = []
    for item in sub_methods:
        results.append({'id': item.sub_method.id, 'text': item.sub_method.name})

    return HttpResponse(json.dumps({'err': 'nil', 'results': results, 'results2': results2}), content_type='application/json')

Я хотел бы импортировать в свое раскрывающееся поле значения из results2 (файл python), когда у меня sel_val пуст:

if (sel_val === '') {
   ...
}

Итак, как я мог переписать эту часть:

if (sel_val === '') {
    console.info('none sorting group');
    $("select#id_method-sub_method").empty();
    $("select#id_method-sub_method").append('<option value = ""> test </option>'); //here add list of all submethods
    return;
  }

Нравится :

if (sel_val === '') {
    $("select#id_method-sub_method").empty();
    for (var i = 0; i < result['results2'].length; i++) {
      $("select#id_method-sub_method").append('<option value = "' + result['results2'][i].id + '">' + result['results2'][i].text + '</option>'); //here add list of all submethods
    }
    return;
  }

с for loop и добавить все элементы из results2 в мое раскрывающееся поле? Проблема на самом деле с result['results2']

Надеюсь, это читабельно и понятно.

Спасибо !

РЕДАКТИРОВАТЬ :

Как сказал @Darren Crabb, это возможно вне рамок.

Итак, я переписал свой JS так:

if (!sel_val) {
    reset_select('id_method-sub_method');
    $("select#id_method-sub_method").empty();
    var all = "{{ results2 }}";
    for (var i = 0; i < all.length; i++) {
      $("select#id_method-sub_method").append('<option value = "' + all[i].id + '">' + all[i].text + '</option>'); //here add list of all submethods
    }
    return;
  }

И я определил в своем файле Python: context['results2'] = SubMethod.objects.all()

Я получаю это:

JQuery: как добавить список объектов в Ajax

Что не так с показанным подходом «Как это»? Покажите нам, как выглядит result['results2']

charlietfl 19.11.2018 16:27

«Проблема на самом деле в результате ['results2']» ... и в чем именно является проблема? Что не так?

ADyson 19.11.2018 16:27

У меня проблема с моей консолью: result is not defined. Я не знаю, где мне установить этот фрагмент кода. Более того, я не знаю, правильно ли делать такие вещи, потому что это мой первый код JQuery / Ajax. В моем файле Python results2 = [{'id': 449, 'text': '50% cell culture infective dose (CCID50)'}, {'id': 176, 'text': 'Acetic acid in synthetic peptides'}, ...

Essex 19.11.2018 16:30

Возможно, стоит проверить сетевую активность в вашей консоли, особенно в отношении файла, к которому обращается вызов ajax. Это должно показать вам заголовки, ответ и т. д. Для каждого указанного файла (если вы нажмете на них), где вы можете проверить, чтобы убедиться, что правильные результаты передаются обратно в ваш клиентский код. По крайней мере, это происходит в консоли Firefox - не уверен в других браузерах. Это часто очень помогает при работе с ajax.

Darren Crabb 19.11.2018 17:13

Похоже, вы пытаетесь получить доступ к «результату» вне области видимости. Насколько я могу судить, результат определяется только в обратном вызове функции ajax, где он будет содержать ответ на вызов, он не определен нигде в верхней части кода.

Darren Crabb 19.11.2018 17:25

@DarrenCrabb Я определил var all = "{{ results2 }}"; и в моем файле views.py context['results2'] = SubMethod.objects.all(). Вроде работает, у меня есть список, но все объекты undefined. Я отредактирую свой вопрос, чтобы показать вам результат.

Essex 19.11.2018 17:42

также может быть стоит проверить параметр dataType в вызове ajax, чтобы убедиться, что он настроен на ожидание json или любого другого результата, который вы ожидаете получить. Мне раньше было весело, когда я ошибался.

Darren Crabb 22.11.2018 11:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
44
0

Другие вопросы по теме