Как сравнивать словари и выделять цветом различные ключи и значения

У меня есть приложение django. И у меня есть два texbox'а, в которых отображаются данные, поступающие из двух разных функций.

Итак, данные отображаются в текстбоксах. Но ключ и значение должны быть выделены красным цветом, если есть разница в двух словарях. В данном примере это ananas, который имеет разницу.

У меня есть TestFile с данными:

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)

и шаблон: 

<!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>

Проблема, с которой я столкнулся, заключается в том, что я пытаюсь перебирать словари в шаблоне. Но диффренция не окрашивается в красный цвет. Вот вывод:

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

А как избавиться от html в texbox?

Итак, если я сделаю следующее: 

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)

Затем я вижу в операторе print правильную разницу:

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

Но как отметить этот красный цвет в шаблоне?

Здесь есть две ошибки. Первое - как вы создаете переменную 'diff_set' для проверки в шаблоне, это должен быть список с именем фрукта:

['ananas',...]

Второе - попытка закрасить линии внутри текстовой области с помощью HTML-тегов. Это возможно сделать, основываясь на этом ответе (лично я никогда даже не пробовал делать подобное).

Кроме того, в вашем коде есть несколько лишних процессов. Но для того, чтобы все работало как есть, просто отфильтруйте diff_set и измените шаблон:

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)
Вернуться на верх