4

Tengo este diccionario y lo quiero imprimir en html con un for:

def Index(request)
Index={
"productos":{
        "completo":{
            "destacado": "si",
            "nombre": "Completo",
            "precio": 3499,
            "moneda": "pesos argentinos",
            "caracteristicas":{
                "Autoadministrable",
                "0% de comisiones",
                "Analíticas completas",
                "Soporte técnico",
                "Cambio de plantilla",
                "Web Hosting",
                "Dominio .com + SSL",
                "Email para empresas"
            },
            "boton": "Continuar"
        },
}
Index.update()
return render(request, "index.html", Index)

Con diccionarios de un solo nivel lo hacía de la siguiente forma:

{% for title, desc in servicios.items %}
<div>
    <div>
        <h2>{{title}}</h2>
    </div>
    <p>{{desc}}</p>
</div>
{% endfor %}

pero, ¿cómo puedo hacer para diccionarios de varios niveles? Desde ya muchas gracias


Actualización: Creí que no era relevante mostrar lo que quiero hacer en el front pero me di cuenta que si, ya que no todos los datos los quiero como cadena de texto o elemento de lista. introducir la descripción de la imagen aquí

En principio, el primero elemento sería un "if" que verifique si el valor de la clave es = "si" o no, y en consecuencia mostrar el cartel de "mejor oferta".

Luego tengo elementos de título y subtítulo, que serían h1, h2 y span respectivamente.

Después hay una lista como se pudo intuir desde un principio. Por último, simplemente imprimir un valor de texto.

Entiendo que también se podría aplicar el método que me comentó, pero en ese caso, si cada elemento del objeto fuera una lista o elemento de lista, ya que tendría que escribir html dentro de django, lo cual creo que no es lo más optimo y además no sé si python lo permite. Algo así como:

"completo":{
        "destacado": "si",
        "nombre": "<h1 class="">Completo</h1>",
        "precio": "<h2 class="">3499</h2>",
        "moneda": "<span class="">pesos argentinos</span>"
}

Y en el HTML, en teoría me quedaría:

<ul>
    <li><h1>Completo</h1></li>
</ul>

Lo cual no es la notación más optima para HTML, por otro lado, el "if destacado = si" se imprimiría como un elemento de lista cuando solo lo necesito como dato condicional.

PD: el util.py no se como cargalo, intente ponerlo en INSTALLED_APPS dentro de settings.py pero me devuelve error:

INSTALLED_APPS = [
    'backend.templatetags.util'
]
#Error: 'util' is not a registered tag library. Must be one of: admin_list, admin_modify, admin_urls, cache, i18n, l10n, log, static, tz

Nuevamente muchas gracias!

1
  • el util es propio de tu backend no es una aplicacion instalada por ello esta linea 'backend.templatetags.util' te dara error, lo que debes hacer es agregar tu lib donde la utilizaras pero por lo visto esta agregando un metodo en el filter asi que al parecer no es necesario Commented el 11 dic. 2019 a las 15:18

2 respuestas 2

5

Advertencia Ya que la pregunta ha cambiado bastante desde mi anterior respuesta, creo que procede dar una respuesta diferente, pues la anterior era para un caso muy genérico en el que no se conocen de antemano las claves del diccionario ni su significado, cosa que no parece ser el caso. No obstante dejo la respuesta anterior también por si es útil a quien se encuentre en el caso antes explicado.

Ya que tienes claros los nombres de los campos a mostrar (precio, nombre, moneda, etc.) y podemos dar por supuesto que esos campos estarán disponibles en todos los elementos de tu diccionario (al menos en los que vamos a mostrar, que son los "destacados"), directamente puedes acceder a sus valores usando producto.precio, producto.nombre, etc.

El template

Es ahora mucho más sencillo y no necesitamos averiguar si el elemento es o no es iterable. Ya sabemos que producto.caracteristicas es una lista, y el resto son directamente datos.

Quedaría así:

{% extends "base.html" %}
{% block content %}
{% for clave, producto in productos.items %}
  {% if producto.destacado == "si" %}
  <div class="producto">
    <div class="imagen_producto">
    <img src="https://via.placeholder.com/150">
    </div>
    <h1>{{producto.nombre}}</h1>
    <h2>${{producto.precio}}</h2>
    <span class="moneda">{{producto.moneda}}</span>
    {% if producto.caracteristicas %}
      <div class="caracteristicas"><ul>
      {% for caractersitica in producto.caracteristicas %}
        <li>☑ {{ caractersitica }}</li>
      {% endfor %}
      </ul></div>
    {% endif %}
    {% if producto.boton %}
      <button>{{ producto.boton }}</button>
    {% endif %}
  </div>
  {% endif %}
{% endfor %}
{% endblock %}

He metido algunos <div> y algunas class para hacer más sencillo el dar el estilo deseado al resultado final. Observa que en este caso la fuente de la imagen la he prefijado a la que se puede obtener en https://via.placeholder.com/150 ya que realmente en tu JSON no veo que venga cuál sería la imagen en cuestión. Lo suyo sería que el JSON tuviera un campo img o similar que lo indicara.

El resultado de renderizar este template sale (observa que no he dado estilos via css):

resultado

Bonus

Mediante el css apropiado, el mismo template se verá así:

Resultado con estilo

El CSS usado ha sido:

.producto {
  background: white;
  margin: 10pt auto;
  width: 240px;
  padding: 2em;
  text-align: center;
  box-shadow: 5px 10px 8px #888888;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.producto > h2 {
  font-family: Helvetica;
  font-size: 32pt;
  font-weight: lighter;
  padding: 0pt;
  margin: 0pt;
}

.producto ul {
  text-align: left;
  color: #aaa;
  list-style: none;
}

.producto button {
  background-color:  rgb(72, 209, 125);
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 1em 2em;
  border: none;
  border-radius: 2pt;
  font-size: 14pt;
  margin-top: 14pt;
}

Nota no soy diseñador web y no sé gran cosa de CSS. Si algún experto ve alguna burrada en el css anterior, siéntase libre de criticarlo y proponer mejoras en comentarios.

1
  • Sinceramente infinitas gracias, me ayudaste perfectamente en lo que estaba consultando e incluso más que me resulto muy útil. Lo único que me quedó es lo de la img que como bien te diste cuenta, me olvide de ponerlo en el JSON, cabe recalcar que lo ideal es cargar un archivo html (donde tengo el html de img> con una cadena de base64); desde el frontend lo estaba llamando de la siguiente forma: {% include "../assets/icons/tienda2.html" %}. De todas formas, tu respuesta abarcó todo lo que consulte y por eso te agradezco y pongo tu respuesta como solución. Nuevamente muchas gracias! Commented el 11 dic. 2019 a las 23:22
5

Hay algunos problemas de entrada en tu código. Aparte de la indentación que está mal (supongo que efectos del copia/pega), también tienes.

  • Una función llamada Index(). Normalmente las mayúsculas se reservan para nombres de clases, las funciones deben ir en minúsculas.
  • Una variable llamada Index, dentro de esa función. Cabe decir lo mismo (debería ir en minúscula), pero además no debería llamarse igual que la función, pues estarías sobreescribiendo localmente el significado de ese símbolo. Esto no es muy importante en este caso en el que no hay llamadas recursivas a sí misma, pero deberías evitarlo.
  • Un Index.update() que no hace nada.
  • Un conjunto dentro de un diccionario. En concreto, la clave "caracteristicas" tiene una serie de cadenas separadas por comas y todo ello entre llaves. Supongo que querrías usar corchetes [ ] en vez de llaves { } en ese punto, para que fuera una lista de cadenas. El uso de llaves hace que sea un conjunto. En este caso la diferencia más importante sería que los conjuntos no preservan el orden y las listas sí (hay muchas más diferencias, por supuesto, son tipos distintos, pero en este caso sería el efecto secundario más visible).

Y vamos con la pregunta en sí.

Planteamiento

Lo primero es aclarar mejor la estructura de los datos de entrada. En tu ejemplo sólo hay un "producto", llamado "completo" y su valor es otro diccionario. Pero en un caso más general ¿podrían aparecer otros productos que no contuvieran sub-diccionarios sino directamente una cadena por ejemplo?

Supongamos el siguiente caso:

index={
"productos":{
        "completo":{
            "destacado": "si",
            "nombre": "Completo",
            "precio": 3499,
            "moneda": "pesos argentinos",
            "caracteristicas": [
                "Autoadministrable",
                "0% de comisiones",
                "Analíticas completas",
                "Soporte técnico",
                "Cambio de plantilla",
                "Web Hosting",
                "Dominio .com + SSL",
                "Email para empresas"
            ],
            "boton": "Continuar"
        },
        "incompleto": "No existe"
  }
}

Aquí el producto "completo" tiene como valor otro diccionario, mientras que el producto "incompleto" tiene como valor una cadena. Como consecuencia, en el template html deben ser mostrados de forma diferente.

Algo así pasa con las claves del producto. En algunas claves tienes meramente cadenas (como en "destacado"), en otras tienes números (como en "precio") y en otras tienes iterables (como en "características"). Esta última debería mostrarse como una sub-lista de items anidados.

Finalmente ¿cuántos niveles piensas soportar? ¿Puede que alguna de las claves del producto sea a su vez otro diccionario? Si se quiere soportar un número arbitrario de niveles, el template debería ser recursivo, cosa que no creo que esté soportada. De modo que me centraré en el ejemplo anterior y supondremos que:

  • Los elementos a mostrar están en la clave "productos"
  • Cada elemento puede contener otro subdiccionario, o bien una cadena
  • El subdiccionario no contendrá más subdiccionarios, sino que los valores son directamente cadenas y números, o bien listas (como es el caso de la clave "caracteristicas".

Problema

El problema más difícil aquí es detectar dentro del template si el elemento del diccionario por el que estás iterando es otro diccionario o es una lista (en cuyos casos debes anidar otro bucle para mostrarlos) o es un elemento final a mostrar directamente.

Django (a diferencia de Jinja2) no proporciona métodos para terminar el tipo de una variable desde dentro del template. Así que tendremos que implementar uno de estos métodos como un filtro.

Solución

Crea un fichero en tu_aplicacion/templatetags/ llamado util.py y escribe lo siguiente:

from django import template
from collections.abc import Iterable

register = template.Library()

@register.filter
def is_iterable(value):
    return isinstance(value, Iterable) and not isinstance(value, str)

Esto implementa el filtro is_iterable que podremos usar después en el template para saber si el elemento que estamos procesando tiene o no sub-elementos.

Ahora ya podremos escribir nuestro template por ejemplo así:

{% load util %}
<h1>Productos</h1>
{% for clave, valor in productos.items %}
<h2>{{ clave }}
  {% if valor|is_iterable %}</h2>
    <ul>
    {% for clave, valor in valor.items %}
    <li>{{ clave }}{% if valor|is_iterable %}</li>
        <ul>
          {% for elem in valor %}
          <li> {{ elem }}</li>
          {% endfor %}
        </ul>
        {% else %} : {{ valor }}</li>
        {% endif %}
    {% endfor %}
    </ul>
  {% else %}
  -- {{ valor }}</h2>
  {% endif %}
{% endfor %}

Observa cómo se usa el filtro |is_iterable para decidir si crear una sub-lista <ul>...</ul> con otro bucle.

El resultado de aplicar este template sobre los datos anteriores sería:

Resultado

Tienes una demo funcionando en repl.it (aunque no sé cuánto tiempo durará este enlace)

2
  • Hola, antes que nada, realmente muchas gracias por tomarte el tiempo de darme una respuesta de alta calidad y porque me informaste de muchas cuestiones que no estaba considerando; como ya te habrás dado cuenta, soy nuevo tanto con Django como con Python, lo entiendo levemente solo por conocer otros lenguajes. Respecto al post, lo acabo de actualizar para mostrarte en detalle lo que quiero hacer en el template. Commented el 11 dic. 2019 a las 15:00
  • @GabrielBenitez si sabes que donde va caracteristicas vas a mostrar caracteristicas con solo hacer <h1>producto["completo"]</h1><span>producto["precio"]</span>y en el ul {% for elem in producto["caracteristicas"]%} <li> {{ elem }}</li> {% endfor %} Commented el 11 dic. 2019 a las 15:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.