I have a django model field defined as a JSONField as shown below. The values stored in this particular field is a list of length 1 and has JSON data as shown below. When I use the phone column in a django form, it displays the entire list value. If I try to get the 'data' value (1234567890) inside the template using the below logic, I keep getting crispy_forms.exceptions.CrispyError: |as_crispy_field got passed an invalid or inexistent field error.

How can I extract the 'data' key from the JSON and display its corresponding value? I am using django 3.1 and using postgres as my backend db.

​

phone column example from db:

[{'type': 'mobile', 'data': '1234567890'}]

models.py:

class Client(models.Model):
    name = models.TextField()
    phone = models.JSONField(blank=True, null=True)

forms.py

from .models import Client

class ClientForm(forms.ModelForm):
    class Meta:
        model = Client
        fields = '__all__'

clients.html template (need to display:

{% load crispy_forms_tags %}

<form method="POST">
    <div class="form-row">
        <div class="form-group col-md-6">
            {{ form.name | as_crispy_field }}
        </div>
        <div class="form-group col-md-6">
            {% for item in form.phone %}
                {{ item.0.data | as_crispy_field }}
            {% endfor %}
        </div>
    </div>
</form>