Dictionary passed to template wont yield any values.

I have tried various methods of accessing dictionary values, and even custom filters and no luck.

view.py
-------

```
def home_view(request, location):
    cards = Site.objects.get(sites=location.upper()
                             ).site_cards.all().values('cards')
    vlans = json.load(open('allvendors/static/json/vlan.json'))
    vlans_location = vlans[location]

    home = {
        "site": location,
        "cards": cards,
        "vlans": vlans_location,
    }
    return render(request, 'allvendors/home.html', {"home": home})

```

allvendors\_filters.py
----------------------

```
from django import template

register = template.Library()

@register.filter(name='lookup')
def lookup(dictionary, key):
    return dictionary[key]

```

cards
-----

```
<QuerySet [{'cards': 'A'}, {'cards': 'B'}, {'cards': 'C'}, {'cards': 'D'}]>

```

vlans\_location
---------------

```
{
   'A':{
      'vlan':'101'
   },
   'B':{
      'vlan':'102'
   },
   'C':{
      'vlan':'103'
   },
   'D':{
      'vlan':'104'
   }
}

```

home.html
---------

```
{% load allvendors_filters %}
{% for card in home.cards %}
        <div class="card mb-4 box-shadow shadow">
            <div class="card-header">
                <h4 id="whatfor" class="my-0 font-weight-normal">{{ card|title }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">Vlan:
                    <small class="text-muted">
                        <a href="#" target="_blank">
                            {{ home.vlans|lookup:card.cards }}
                        </a>
                    </small>
                </h1>
                <a class="text-decoration-none" href="{{ card|lower }}/">
                    <button id="seedata" type="button" class="btn btn-lg btn-block btn-outline-primary">See
                        Database</button>
                </a>
            </div>
        </div>
        {% endfor %}

```

The issue is {{card}} by itself works and the loop creates a div for each card 1 thru 3, but {{card.vlan}} wont output anything.

I feel im accessing it wrong but i cant figure out why or how.

Any pointers are welcome.

EDIT
----

Trying to rethink it a bit, used a custom filter: {{ home.vlans|lookup:card.cards }} gets me a dictionary for the values corresponding card and the dictionary itself is written in the html:

```
 {'vlan': '101'} written in Card A
 {'vlan': '102'} written in Card B
...and so on

```

but if attempt to access vlan then it fails with {{ home.vlans|lookup:card.cards.vlan }} --> Failed lookup for key [vlan] in 'A'

Solution
--------

In selected marked answer below.

Thanks