Saving HTML data into JSONField in Django

45 views Asked by At

I have a checksheet with multiple item rows and checkboxes along it.

    {% for obj in checksheet_items %}

<tr class="table-row">
    <td class="cell-width">
        <p class="cell-content"><span>{{ forloop.counter }}</span></p>
    </td>
    <td class="cell-width" colspan="14">
        <p class="cell-content  text-start"><span>{{ obj.item_name }} {% if obj.checksheet_number == 'E01A ELECTRICAL' and forloop.counter == 14 %} <input class="form-control form-control-sm bg-info" style="width: 50px; display: inline-block;" type="text" name="addition-14" value="{{ check_sheet_data.14.addition }}"><span style="display: inline-block;">M</span>{% endif %}</p>
    </td>
    <td class="cell-width text-center">
        <input class="exclusive-checkbox-{{ forloop.counter }}" type="checkbox" name="checksheet_{{ checksheet.id }}_ok_{{ forloop.counter }}" id="">
    </td>
    <td class="cell-width text-center">
        <input class="exclusive-checkbox-{{ forloop.counter }}" type="checkbox" name="checksheet_{{ checksheet.id }}_na_{{ forloop.counter }}" id="">
    </td>
    <td class="cell-width text-center">
        <input class="exclusive-checkbox-{{ forloop.counter }}" type="checkbox" name="checksheet_{{ checksheet.id }}_pl_{{ forloop.counter }}" id="">
    </td>
</tr>

{{ checksheet_data }}

{% endfor %}

{% block javascript %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        {% for obj in checksheet_items %}
            var checkboxes{{ forloop.counter }} = document.querySelectorAll(".exclusive-checkbox-{{ forloop.counter }}");
            
            checkboxes{{ forloop.counter }}.forEach(function(checkbox) {
                checkbox.addEventListener("change", function() {
                    checkboxes{{ forloop.counter }}.forEach(function(otherCheckbox) {
                        if (otherCheckbox !== checkbox) {
                            otherCheckbox.checked = false;
                        }
                    });
                });
            });
        {% endfor %}
    });
</script>
    

{% endblock %}

I am storing data in JSONField in my models.py. Everything works fine I am able to save the data by following views.py:

        if form.is_valid():
        check_sheet_data = {}  # Initialize a dictionary to store row data
        
        num_items = number_of_items  # You can retrieve the number of items from the form if needed

        # Iterate through the form data and collect checkbox statuses for each row
        for item_number in range(1, num_items + 1):


            ok = request.POST.get(f'checksheet_{checksheet.id}_ok_{item_number}', False)
            na = request.POST.get(f'checksheet_{checksheet.id}_na_{item_number}', False)
            pl = request.POST.get(f'checksheet_{checksheet.id}_pl_{item_number}', False)
            # Create a dictionary for each row
            row_data = {'ok': ok, 'na': na, 'pl': pl}

            check_sheet_data[str(item_number)] = row_data

        # Convert the dictionary to a JSON-formatted string
        checksheet.checksheet_data = json.dumps(check_sheet_data)           

Problem is that once I print the data from checksheet_data field it shows that due to iteration I create dictionary with right number of key-value pairs but it is multiplied item_number times (in this case 15 times see attached json data)

{'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}} {'1': {'ok': False, 'na': False, 'pl': False}, '2': {'ok': False, 'na': False, 'pl': False}, '3': {'ok': False, 'na': False, 'pl': False}, '4': {'ok': False, 'na': False, 'pl': False}, '5': {'ok': False, 'na': False, 'pl': False}, '6': {'ok': False, 'na': False, 'pl': False}, '7': {'ok': False, 'na': False, 'pl': False}, '8': {'ok': False, 'na': False, 'pl': False}, '9': {'ok': False, 'na': False, 'pl': False}, '10': {'ok': False, 'na': False, 'pl': False}, '11': {'ok': False, 'na': False, 'pl': False}, '12': {'ok': False, 'na': False, 'pl': False}, '13': {'ok': False, 'na': False, 'pl': False}, '14': {'ok': False, 'na': False, 'pl': False}, '15': {'ok': False, 'na': False, 'pl': False}}

... I guess this is not correct behaviour so want some help where i am failing.

0

There are 0 answers