Как выбрать опеределенную информацию из json в html коде?

Рейтинг: 0Ответов: 1Опубликовано: 12.08.2025

пишу тестовый сайт на flask python. есть структура json сайта:

{
    'Info': [
        {'id': 1, 'title': 'Name table1', 'content': 'table1 will be here', 'idcard': 'Card', 'idmenu': 'Info', 'author': None, 'date': None}, 
        {'id': 2, 'title': 'Name article1', 'content': 'article1 will be here', 'idcard': 'Card', 'idmenu': 'Info', 'author': None, 'date': None}, 
        {'id': 3, 'title': 'Name table4', 'content': 'table4 will be here', 'idcard': 'MiniCard', 'idmenu': 'Info', 'author': None, 'date': None}
    ], 
    'Start': [
        {'id': 4, 'title': 'Name table2', 'content': 'table2 will be here', 'idcard': 'Card', 'idmenu': 'Start', 'author': None, 'date': None}, 
        {'id': 5, 'title': 'Name table3', 'content': 'table3 will be here', 'idcard': 'MiniCard', 'idmenu': 'Start', 'author': None, 'date': None}, 
        {'id': 6, 'title': 'Name table5', 'content': 'table5 will be here', 'idcard': 'MiniCard', 'idmenu': 'Start', 'author': None, 'date': None}
    ], 
    '2G': [
        {'id': 7, 'title': 'Name table6', 'content': 'table6 will be here', 'idcard': 'MiniCard', 'idmenu': '2G', 'author': None, 'date': None}, 
        {'id': 8, 'title': 'Name table7', 'content': 'table7 will be here', 'idcard': 'Card', 'idmenu': '2G', 'author': None, 'date': None}, 
        {'id': 9, 'title': 'Name table8', 'content': 'table8 will be here', 'idcard': 'MiniCard', 'idmenu': '2G', 'author': None, 'date': None}, 
        {'id': 10, 'title': 'Name table9', 'content': 'table9 will be here', 'idcard': 'MiniCard', 'idmenu': '2G', 'author': None, 'date': None}
    ]
}

код страницы выглядит таким образом Как мне занести данные в html так чтобы можно блок в странице разделить на Card и MiniCard? У меня получается один блок Info хранит подблоки с типами Card и MiniCard, start тоже такие подблоки хранит и 2G аналогично. Как мне отсортировать в html код MiniCard Слева, а Card справа?

{% for j_key, j_value in json_data.items() %}
<div class="row g-0 text-center" id="{{ j_key }}">
    <div class="col-6 col-md-3" style="overflow-y: scroll; height:500px;">
        <div class="card">
        <div class="card-body">
            <h4>{{ j_value[0].idmenu }}</h4>
            <h2">Title 1</h2>
            <p>Text Small</p>
        </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-9" style="overflow-y: scroll; height:500px;">
        <div class="card">
        <div class="card-body">
            <h4>>{{ j_value[0].idmenu }}</h4>
            <h2>Title 2</h2>
            <p>Text big</p>
        </div>
        </div>
    </div>
</div>
{% endfor %}
python html json flask
Источник: Stack Overflow на русском

Ответы

▲ 0

В общем получилось у меня таким образом решить проблему, правда не знаю, правильно это или нет:

{% for j_key, j_value in json_data.items() %}
<div class="row g-0 text-center" id="{{ j_key }}">

    <div class="col-6 col-md-3" style="overflow-y: scroll; height:500px;">
        <div class="card">
        {% for item in j_value %}
        <div class="card-body">            
            {% if (item.idcard=='MiniCard') == true %}
            <p>{{ item.title }}</p>
            <p>{{ item.content }}</p>
            {% endif %}
        </div>
        {% endfor %}
        </div>
    </div>

    <div class="col-sm-6 col-md-9" style="overflow-y: scroll; height:500px;">
        <div class="card">
        {% for item in j_value %}
        <div class="card-body">            
            {% if (item.idcard=='Card') == true %}
            <p>{{ item.title }}</p>
            <p>{{ item.content }}</p>
            {% endif %}
        </div>
        {% endfor %}
        </div>
    </div>

</div>
{% endfor %}