how to compare dictionaries and color the different key, value-CodePudding

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 >
            <div >
                <textarea  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 >
            <div >
                <textarea  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?

CodePudding user response：

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 >
        {% 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)