How can I traverse through two list concurrently in one for loop using in django templates to be implemented in a chatbot app

Question

So I am trying a chatbot application where the user will take a user string response and after that, the chatbot will throw a reply. Meaning that it should be able to traverse in two string lists user_response and chat_response in one for loop. The problem that I am having is that I have no idea how to implement this in Django that suits the way I need to implement it. I should implement it this way:

    {% for chat in user_chat#<-not sure here %}
        <div class="chat self animated slideInUp fast">
                <div class="user-photo">
                    <img src="{% static 'images/account_200px.png'%}"alt="Self"></div>
                    <div class="chat-message">{{ user_chat }}
                </div>
        </div>
        <div class="chat friend animated slideInUp fast">
            <div class="user-photo">
                 <img src="{% static 'images/icon-at.png'%}"alt="Dog"></div>
                 <div class="chat-message">
                    {{ response #<-the response from system|safe}}
                 </div>
           </div>
   {% endfor %}

Meaning in that one instance of a loop I should be able to render two divs with different classes that obviously have different messages that came from two different string lists. Like

for loop{

      render(user_chat)
      render(system_response)
}

Which in turn should produce this kind of response Given that:

user_chat = ["Hi", "I am okay", "good!"]
system_response = ["How are you", "How Okay are you?", "Oh that's great to hear"]

Will make

Hi
How are you
I am okay
How Okay are you?
good!
Oh! that's great to hear

I have tried this solution how can i set two for loop in django template for send and receive chats?

However, maybe due to my limitation or maybe because the solution is implemented in a way that does not suit the specification of the program I am doing I failed to do it effectively and produced only this :

Hi
Hi
I am okay
I am okay
good!
good!
How are you
How are you
How Okay are you?
How Okay are you?
Oh! that's great to hear
Oh! that's great to hear

Did I do something wrong? Can someone tell me the fix?

Here is the html after I implemented the solution

{% for chat in message %}
                <div class="chat self animated slideInUp fast">
                    <div class="user-photo"><img src="{% static 'images/account_200px.png'%}"alt="Self"></div>
                    <div class="chat-message">{{ chat }}</div>
                </div>
                <div class="chat friend animated slideInUp fast">
                    <div class="user-photo"><img src="{% static 'images/icon-at.png'%}"alt="Dog"></div>
                    <div class="chat-message">{{ chat|safe}}</div>
                </div>
                {% endfor %}

Here is my views.py now

from django.shortcuts import render
import operator
from itertools import chain

# Create your views here.
def messenger_view(request):
    chat = ["hi","ho","hey"]
    response =  ["hille","hoe","hey0"]
    message = chain(chat, response)
    context = {
        "lists":["hi","ho","hey"],
        "message": message
    }
    return render(request, "chatbot/index.html",context)

Thank you!

Answer 1

if you want to create list of two lists. you can zip and iterate them:

a = [1,3,5,7,9,11]
b = [2,4,6,8,10]
c = []
for i, j in zip(a,b):
  c.extend([i,j])
#to handle uneven number of responses
if len(a)>len(b): c.append(a[-1])
print(c)

output : [1,2,3,4,5,6,7,8,9,10,11]

P.S :‌ a cleaner way of calculating c is nested list comprehension, but i figured a for loop is easier to read for you:

c = [message for pair in zip(a,b) for message in pair]