Django - Как правильно отправить список из шаблона в AJAX для просмотра?

Question

Я пытаюсь сделать запрос получения AJAX на сервер всякий раз, когда пользователь нажимает кнопку. Есть два вида кнопок. Одна кнопка для запуска всех сирен для всех перечисленных камер, и есть кнопка для каждой отдельной камеры.

Моя проблема в том, что я пытаюсь вернуть список словарей из AJAX в представление. JQuery видит объект как строку, так что технически я предполагаю, что он уже находится в формате JSON. Когда я отправляю его в представление, представление видит его как Querydict, и когда я пытаюсь проиндексировать его, он возвращает только единичные символы строки. Когда я пытаюсь вызвать json.loads(cameras) в views.py, выдается сообщение об ошибке:

json.decoder.JSONDecodeError: Ожидаемое имя свойства заключено в двойные кавычки: строка 1, столбец 3 (символ 2) `` `

Я знаю, что это, вероятно, проблема с обработкой переменной на внешней стороне, но я не уверен, как решить эту проблему. Должен ли я изначально передать переменную из представления в шаблон по-другому? Я неправильно передаю переменную из шаблона в JQuery? Я неправильно обрабатываю переменную в JQuery? Или я просто что-то не так делаю в представлении?

Вот что видит пользователь

---

views.py

def trigger_sirens(request):
    # Retrieve the list of dictionaries
    cameras = request.GET.get('cameras')
    print(type(cameras)) # ==> <class 'str'>
    print(cameras)       # ==> [{'name': 'camera1', 'site': 'city'}, {'name': 'camera2', 'site': 'city'}]
    print(cameras[0])    # ==> [

    # Manipulate data

    return JsonResponse({'success': True}, status = 200) # This is just a placeholder for now

siren_search.html

<!-- These buttons are wrapped in forms because this is how I built it first
without using javascript, but now I'm trying to implement javascript functionality -->

<!-- A button to trigger all the listed -->
<form id="trigger-all-form" action="{% url 'camera_search:siren_search' %}" method="GET">
    <button id="trigger-all-btn" name="pulse-all-sirens" type="submit"
        class="btn siren-btn btn-lg btn-block js-trigger-all-sirens-btn"
        value="{{ cameras }}">
        Trigger all sirens at {{ term }}
    </button>
</form>

<!-- A button to trigger only one siren -->
<form id="{{ camera.asset_name }}-siren-form"
    action="{% url 'camera_search:siren_search' %}" method="GET">
    <button type="submit" name="pulse-siren" id="{{ camera.asset_name }}-siren-btn"
        name="button-big-submit" class="btn siren-btn" value="{{ camera.asset_name }}">
        {{ camera.asset_name }}
    </button>
</form>

custom.js

function buttonAjaxCall(buttonObject) {
  var camerasToTrigger = buttonObject.attr('value');

  console.log(jQuery.type(camerasToTrigger))                 // string
  console.log(camerasToTrigger)                              // [{'name': 'camera1', 'site': 'city'}, {'name': 'camera2', 'site': 'city'}]
  console.log(jQuery.type(JSON.stringify(camerasToTrigger))) // string
  console.log(JSON.stringify(camerasToTrigger))              // "[{'name': 'camera1', 'site': 'city'}, {'name': 'camera2', 'site': 'city'}]"

  if (buttonObject.hasClass('js-trigger-all-sirens-btn')) {
    // Convert data this way, still not sure how
  }
  else {
    // Convert data for one button, still not sure how
  }

  $.ajax({
    url: 'siren/',
    type: 'GET',
    data: {
      'cameras': camerasToTrigger,
    },
    dataType: 'json',
    success: function (response) {
      console.log('Success: ', response)
    },
    error: function (response) {
      console.log('Error: ', response)
    }
  });

}

---

EDIT Согласно комментарию Даниэля, я добавил в свой views.py код, который передает данные в шаблон.

# deployed is a list of dictionaries
context = {
    'cameras': sorted(deployed, key=lambda camera: (camera['site_id'] == 'N/A', camera['site_id'])),
    'term': term
}

return render(request, 'siren_search.html', context)