Настройка JSONField в HTML-странице

Я создал эту модель

class RoadConstruction(models.Model):
    fromCity = models.CharField(max_length=200, null=True)
    toCity = models.CharField(max_length=200, null=True)
    status = models.CharField(max_length=200, null=True)
    date_updated = models.DateTimeField(auto_now_add=True, null=True)
    jsonData = models.JSONField(null=True) 
    profile = models.ForeignKey(Profile, null=True, on_delete=models.SET_NULL)

Итак, когда я использую Forms и добавляю форму в html-страницу, она генерирует текстовую область для jsonData. Но вот в чем загвоздка. Я знаю, как правильно определить содержимое JSONField, но дело в том, что JSON будет динамическим, и все зависит от пользователя, который отправляет форму. Поэтому я не могу исправить JSONField.

Я объясню на примерах, чего я ожидаю от JSONField.

fromCity, toCity, status не требует пояснений, так как может быть очень легко реализована с помощью Forms.

На странице xyz.html изначально будет одна строка пустой формы.

colA colB colC
valueA valueB valueC

Предположим, пользователь ввел данные, указанные выше, т.е. valueA, valueB, valueC. Поэтому я хочу, чтобы данные были сохранены в JSONField как

[
    {
        'colA': valueA,
        'colB': valueB,
        'colC': valueC,
    }
]

Также будет кнопка ADD, которая добавит новую строку, как показано ниже, а затем пользователь сможет заполнить ее. | colA | colB | colC | |------|------|------| | valueA1 | valueB1 | valueC1 | | valueA2 | valueB2 | valueC2 |

Тогда JSONField должно выглядеть следующим образом:

[
    {
        'colA': valueA1,
        'colB': valueB1,
        'colC': valueC1,
    },
    {
        'colA': valueA2,
        'colB': valueB2,
        'colC': valueC2,
    }
]

Таким образом, пользователь может добавлять строки в соответствии с требованиями.

Итак, как я должен реализовать этот тип вещей? Если напрямую использовать ModelForms, то он показывает textarea, и я не могу ожидать, что пользователи моего сайта знают JSON. Как мне сделать его динамическим, чтобы он принимал столько значений, сколько требуется, и сохранял их в jsondata, а затем я могу легко сохранить их в БД?

XYZ.HTML

<form action="" method="POST">
    {% csrf_token %}
    {{form}}
    <input type="submit" value="Submit">
</form>

Выводится текстовая область, соответствующая jsonData.

Всегда ищите django packages и в целом, Google "Django + ключевые слова, относящиеся к текущей задаче"

Django-JSON-widget выглядит актуальным, но я только что нашел его и не могу предложить никаких дополнительных комментариев.

Мне также пришло в голову, что ограниченная форма JSON, которую вы описываете, отображается непосредственно на Django Formset, оформленный в виде трех колонок. После formset.is_valid() вам просто нужно выбрать очищенные данные из каждой формы в наборе и собрать их в список диктов, который затем можно хранить в JSONField.

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