Использование данных из тега select для составления запросов на основе заданного id

Я пытаюсь сделать запросы или отфильтровать данные на основе заданного id из тега select, который у меня есть в html.

В файле index.html у меня есть следующее:

<div class="row">
  <label for="patientId">Choose a patient:</label>
    <select name="patient" id="patient">
      {% for item in patientId %}
        <option value="{{item}}">
           {{item}}
        </option>
      {% endfor %}
    </select>

В этом select у меня есть все идентификаторы из базы данных, на той же странице у меня также есть график, который должен отображать данные, основанные только на этом идентификаторе из тега select. Для этого у меня есть данные, объявленные в теге script:

var ctx = document.getElementById("weeklyChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: {{ hourArray|safe}},
    datasets: [{
      label: "Value",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: {{ glucoseArray|safe}},
    }],
  },
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      intersect: false,
      mode: 'index',
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
        }
      }
    }
  }
});

В файле views.py я отправляю данные следующим образом:

def html(request, filename):
 id = list(Device.objects.values_list('patientId',
 flat=True).distinct())

 context = {"filename": filename,
           "patientId": id,
 }
 return render(request, f"{filename}.html", context=context)

Как я могу фильтровать данные во фронтенде или бэкенде, чтобы получить данные только для выбранного идентификатора?

Заранее спасибо, надеюсь, я хорошо объяснил.

Вернуться на верх