Как отфильтровать список просмотра на основе выбора, сделанного на форме createview? Django

Я учусь использовать Python и Django. У меня нет большого опыта, и это был огромный процесс обучения для меня. Пожалуйста, простите любое невежество в моем вопросе.

Я разрабатываю приложение Django и создал несколько реляционных таблиц. Мой вопрос касается только первых 2 моделей/форм/представлений.

Вот мои модели `

class CustomerName(models.Model):
    #Fields
    company = models.CharField(max_length = 60, help_text = "Enter Customer Name",unique=True)
    def __str__(self):
        return self.company

class ProgramName(models.Model):
    #Fields
    customer = models.ForeignKey("CustomerName",on_delete=models.CASCADE)
    program = models.CharField(max_length = 60, help_text = "Enter Program Name")
    def __str__(self):
        return self.program

` Вот мои представления (я опустил представление добавления клиента, так как оно работает, и я не думаю, что оно имеет значение)

>

`

class ProgramAddView(CreateView, ListView):
    template_name = 'app/ProgramAdd.html'
    form_class = Programform
    model = ProgramName
    success_url = reverse_lazy('Part Number Add')

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["qs_json"] = json.dumps(list(ProgramName.objects.values()))
        return context

` Вот форма

`

class Programform(forms.ModelForm): class Meta: model = ProgramName поля = "all"

class Customerform(forms.ModelForm):
    class Meta:
        model = CustomerName
        fields = ('company',)

`

Вот HTML app/ProgramAdd.html `

{% extends 'base.html' %}

{% block content %}
  <h2>Program</h2>
  <form method="post" class = 'formarea'>
  <div id = 'formarea' class = 'formdiv'>
    {{ form.media.js }}
     <table>
      {{ form.as_table }}
    </table>
    {% csrf_token %}
    <button type="submit">Save</button>
    <a href="{% url 'HomePage' %}">Nevermind</a>
  </div>
  </form>
  <h2>Program List</h2>
  <table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">Program</th>
            <th scope="col">Customer</th>
        </tr>
    </thead>
  </table>
  <ul>
    <div id="box">
      <!-- Iterate over object_list -->
      {% for item in object_list %}
      <!-- Display Objects -->
        {{ item }}
    </div>
   
    <hr/>
    <!-- If object_list is empty  -->
    {% empty %}
    <li>No objects yet.</li>
    {% endfor %}
</ul>

{% endblock %}

{% block scripts %}
<script>
    const data = '{{qs_json}}'
    console.log(data)

    const rdata = JSON.parse(data.replace(/&quot;/g, '"'))
    console.log(rdata)
    console.log("WHAT!?")

    const input = document.getElementById('id_customer')
    console.log(input.selected)

    let filteredArr = []

    input.addEventListener('click', (e)=>{
        console.log(input.value)
        box.innerHTML = ""
        filteredArr = rdata.filter(programname=> programname['program'].includes(e.target.value))
        console.log(filteredArr)
        if (filteredArr.length > 0){
            filteredArr.map(programname=>{
                box.innerHTML += `<b>${programname['program']}</b><br>`
                box.innerHTML += `<b>${programname['customer_id']}</b><br>`
            })
        } else {
            box.innerHTML = "<b>No results found...</b>"
        }
    })

</script>
{% endblock scripts %}

`

Вот как выглядит страница

В идеале, вы должны заполнить форму, чтобы добавить программу к клиенту в базе данных. Я хотел отобразить существующих клиентов + программы, уже имеющиеся в базе данных, внизу под формой.

Когда я делаю выбор, всегда происходит следующее введите описание изображения здесь

На данный момент у меня есть 2 вопроса/проблемы, для которых я еще не нашел решения.

Вопрос A. Мне нужно фильтровать список по имени клиента вместо имени программы, но каждый раз, когда я ссылаюсь на столбец customer (пример ниже), мне говорят, что я не могу использовать .includes, поскольку он не является массивом?

*Выдается следующая ошибка: programname.customer_id.includes не является функцией filteredArr = rdata.filter(programname=> programname['customer_id'].includes(e.target.value))

Это меня смущает, поскольку console.log(rdata) возвращает эту таблицу 0 : {id: 1, customer_id: 1, program: 'Program A'} 1 : {id: 2, customer_id: 2, program: 'Программа A'} 2 : { id: 3, customer_id: 2, program: 'Program B'}

что, я полагаю, означает, что я могу фильтровать по customer_id вместо этого? Я также запустил console.log(input.value), и он возвращает либо 1, либо 2, либо 3, основываясь на моем выборе клиента? Это означает, что фильтр должен основывать свой тест на значении соответствующего выпадающего поля.

Вопрос B: Мой второй вопрос, как мне отобразить клиента в виде его имени, а не ID номера?

Буду признателен за любые отзывы и рекомендации. Спасибо за ваше время.

На вопрос A: Я пробовал менять местами filteredArr = rdata.filter(programname=> programname['program'].includes(e.target.value)) на оба filteredArr = rdata.filter(programname=> programname['customer_id'].includes(e.target.value)) а также filteredArr = rdata.filter(customername=> customername['company'].includes(e.target.value)) Но я либо получаю undefined, либо programname.customer_id.includes не является функцией

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

На вопрос Б: Вместо `

{% for item in object_list %}
      <!-- Display Objects -->
        {{ item }}

I tried using

{% for object in object_list %}
      <!-- Display Objects -->
        {{ object.company }}
        {{ object.program }}

` Что, кажется, показывает желаемый результат, но это не работает с фильтром вообще. Поэтому я не могу продолжить с этим вариантом.

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