0

I have a django application. And I have two texboxes where data is displayed coming from two different functions.

So the data is displayed in the texboxes. But the key,value has to be marked red when there is a difference in the two dictionaries. So in this example it is ananas that has the difference.

So I have the TestFile with the data:

class TestFile:
    def __init__(self) -> None:
        pass    
    
    def data_compare2(self):

        fruits2 = {
            "appel": 3962.00,
            "waspeen": 3304.07,
            "ananas": 30,
        }

        set2 = set([(k, v) for k, v in fruits2.items()])
        return set2

    def data_compare(self):

        fruits = {
            "appel": 3962.00,
            "waspeen": 3304.07,
            "ananas": 24,
        }
        set1 = set([(k, v) for k, v in fruits.items()])
        return set1    

    def compare_dic(self):
        set1 = self.data_compare()
        set2 = self.data_compare2()
    
        diff_set = list(set1 - set2) + list(set2 - set1)
        return diff_set

the views.py:

from .test_file import TestFile

def data_compare(request):
    test_file = TestFile()

    content_excel = ""
    content = ""
    content = test_file.data_compare()
    content_excel = test_file.data_compare2()
    diff_set =test_file.compare_dic()

    context = {"content": content, "content_excel": content_excel, "diff_set": diff_set}

    return render(request, "main/data_compare.html", context)

and the template:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>

        <div class="form-outline">
            <div class="form-group">
                <textarea class="inline-txtarea form-control" id="content" cols="10" rows="10">

                        {% for key, value in content %}
                        <span {% if key in diff_set %} style="color: red;" {% endif %}> {{ key }}: {{value}}</span><br>
                        {% endfor %}            
            </textarea>
            </div>
        </div>


        <div class="form-outline">
            <div class="form-group">
                <textarea class="inline-txtarea form-control" id="content.excel" cols="70" rows="25">

                    {% for key, value in content_excel %}
                    <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
                    {% endfor %}            

                </textarea>
            </div>
        </div>
    </body>
</html>

The problem I face is that I try to loop over the dictionaries in the template. But the diffrence is not colored red. So this is the output:

<span> waspeen: 3304.07</span><br>
                    
<span> ananas: 24</span><br>
                        
<span> appel: 3962.0</span><br>

so if I do this:

def data_compare(request):
    test_file = TestFile()

    content_excel = ""
    content = ""
    content = test_file.data_compare()
    content_excel = test_file.data_compare2()
    diff_set =test_file.compare_dic()
    
    print(diff_set)

    context = {"content": content, "content_excel": content_excel, "diff_set": diff_set}

    return render(request, "main/data_compare.html", context)

Then I see in the print statement the correct difference:

[('ananas', 24), ('ananas', 30)]

But how to mark this red in the template?

mightycode Newton
  • 3,229
  • 3
  • 28
  • 54
  • What's in `content_excel`? My guess as to what's happening here is you're unpacking these tuples into `key` and `value` and then checking essentially if `'ananas'` is in `content_excel`, which contains unpacked tuples, so it will always return false (you're checking if a string is `in` a list of tuples). – Mihai Chelaru Dec 01 '22 at 15:07
  • @MihaiChelaru. What exactly do you mean? content and content_excel are the placeholders to load the dat in the textboxes. Or is there a other way to do this? – mightycode Newton Dec 02 '22 at 11:21

1 Answers1

1

There are two misconcepts. First is how you are building you 'diff_set' variable to check in the template, it should be a list with the name of the fruit (Otherwise you need to do logic at template level, which is one thing you should always avoid.):

['ananas',...]

Second is trying to color lines inside a text area with HTML tags. It is possible to do it based on this answer (personally I never even tried such thing).

Besides that, there are some redundant processes in your code. But, in order to make it work the way it is, just filter your diff_set, and change your template:

template.html:

{% block content %}
    <div class="container center">
        {% for key, value in content %}
            <span {% if key in diff_set %} style="color: red;" {% endif %}>{{ key }}: {{value}}</span><br>
        {% endfor %}

        <p>------------------------------------------------------</p>

        {% for key, value in content_excel %}
            <span {% if key in diff_set %} style="color: red;"{% endif %}>{{ key }}: {{value}}</span><br>
        {% endfor %}
    </div>
{% endblock %}

views.py:

from .test_file import TestFile

def compare_data(request):
    test_file = TestFile()

    content_excel = ""
    content = ""
    content = test_file.data_compare()
    content_excel = test_file.data_compare2()
    diff_set =test_file.compare_dic()

    # filter diff_set
    unique_keys = []
    for v in diff_set:
        if v[0] not in unique_keys:
            unique_keys.append(v[0])

    context = {"content": content, "content_excel": content_excel, "diff_set": unique_keys}

    return render(request, "compare.html", context)
Niko
  • 3,012
  • 2
  • 8
  • 14
  • @Niko.Yes, thank you. the difference is colored red. But I want ofcourse that the content will be loading in the two texboxes: content, content_excel. You see I upload a pdf file and a excel file. Then I filter the content from both files and display them in the two textboxes. And then the difference from both text in the two texboxes have to be marked red. So I need the two texboxes for displaying the data. – mightycode Newton Dec 02 '22 at 10:35
  • 1
    If the objective is only to display information then there is no need to use **textarea**, this kind of field is used for user input. You can go with a simple [paragraph tag](https://www.w3schools.com/html/html_paragraphs.asp) and [format](https://www.w3schools.com/html/html_formatting.asp) at your will. – Niko Dec 02 '22 at 13:46
  • Well then, after uploading, you need to read the content of the files and store them into variables, just like in the dictionaries (can be another data structure). But, to do it raw it is too much trouble, I recommend [pandas](https://pypi.org/project/pandas/) to read the excel and [tabula](https://pypi.org/project/tabula-py/) to read the PDF. – Niko Dec 06 '22 at 14:17
  • Yes, just like in the code above. We pass three keys to the template `context = {"content": content, "content_excel": content_excel, "diff_set": unique_keys}`. That might as well be `context = {"pdf_data": pdf_data, "excel_data": excel_data, "diff_set": unique_keys}` – Niko Dec 06 '22 at 15:56
  • @Niko.Thank you. I have sent you email – mightycode Newton Dec 07 '22 at 08:23