title: Django templating language syntax for navbar notifications
body: <p>I am trying to use the Django templating language in my <code>Django Channels 2.1.2</code> project to render out any unread chat messages in a Facebook-style notification popup.</p>
  
  <p>The list of unread <code>chatmessages</code> (in their respective <code>threads</code>) are not displaying because I am having trouble with the correct syntax.</p>
  
  <p>This is how the front end looks. When you click the message icon, the notification disappears.</p>
  
  <p><a href="https://i.stack.imgur.com/k5NEr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k5NEr.png" alt="inbox number"></a> <a href="https://i.stack.imgur.com/Z7meP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z7meP.png" alt="notification popout"></a></p>
  
  <p>I have a <code>Notification</code> model </p>
  
  <pre><code>class Notification(models.Model):
      notification_user = models.ForeignKey(User, on_delete=models.CASCADE)
      notification_chat = models.ForeignKey(ChatMessage, on_delete=models.CASCADE)
      notification_read = models.BooleanField(default=False)
  
      def __str__(self):
          return f'{self.id}'
  </code></pre>
  
  <p>navbar.html</p>
  
  <pre><code> {% if user.is_authenticated %}
    &lt;li id="notification_li" class="nav-item"&gt;
      &lt;a class="nav-link" href="#" id="notificationLink"&gt;
        &lt;i class="fas fa-envelope"&gt;&lt;/i&gt;&amp;nbsp; Inbox&lt;/a&gt;
        {% for notifications in notification %}
        &lt;span id="notification_id"&gt;{{ notifications.notification_chat }}&lt;/span&gt;
        {% endfor %}
        &lt;div id="notificationContainer"&gt;
              &lt;div id="notificationTitle"&gt;Notifications&lt;/div&gt;
              &lt;div id="notificationsBody" class="notifications"&gt;
              {{ notification.notification_chatessage?? }}
              &lt;/div&gt;
              &lt;div id="notificationFooter"&gt;&lt;a href="{% url 'chat:inbox' %}"&gt;See All&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>base.html</p>
  
  <pre><code>  &lt;script&gt;
      $(document).ready(function() {
        $("#notificationLink").click(function() {
          $("#notificationContainer").fadeToggle(300);
          $("#notification_id").fadeOut("slow");
          return false;
        });
  
        //Document Click hiding the popup
        $(document).click(function() {
          $("#notificationContainer").hide();
        });
  
        //Popup on click
        $("#notificationContainer").click(function() {
          return false;
        });
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>context_processors.py</p>
  
  <pre><code>def notification(request):
      if request.user.is_authenticated:
          notification = Notification.objects.filter(notification_user=request.user)
          return {'notification':notification}
      return Notification.objects.none()
  </code></pre>
  
  <p>I have the context processor also added into settings
  in the correct place. The <code>notification_id</code> should be sent using the message WebSocket and updated each time a new message is sent (I still haven't managed to do this successfully).</p>
  
  <p>consumers.py</p>
  
  <pre><code>async def websocket_receive(self, event):
          # when a message is received from the websocket
          print("receive", event)
  
          message_type = event.get('type', None)  #check message type, act accordingly
          if message_type == "notification_read":
               # Update the notification read status flag in Notification model.
               notification = Notification.object.get(id=notification_id)
               notification.notification_read = True
               notification.save()  #commit to DB
               print("notification read")
  
          front_text = event.get('text', None)
          if front_text is not None:
              loaded_dict_data = json.loads(front_text)
              msg =  loaded_dict_data.get('message')
              user = self.scope['user']
              username = 'default'
              if user.is_authenticated:
                  username = user.username
              myResponse = {
                  'message': msg,
                  'username': username,
                  'notification': notification_id  # send a unique identifier for the notification
              }
              ...
  </code></pre>
  
  <p>thread.html</p>
  
  <pre><code>   ...
        // below is the message I am receiving
        socket.onmessage = function(e) {
          var data = JSON.parse(event.data);
          // Find the notification icon/button/whatever
          // and show a red dot, add the notification_id to element as id or data attribute.
          console.log("message", e)
          var chatDataMsg = JSON.parse(e.data)
          chatHolder.append('&lt;li&gt;' + chatDataMsg.message + ' from ' + chatDataMsg.username + '&lt;/li&gt;')
        }
  </code></pre>
  
  <p>In addition to helping me with this question, I would really appreciate any good learning resources.</p>