For loop inside of Javascript dynamic Html content in Django

Question

I will have a strange question.

Version: Django version 3.0.8

This is my Javascript code:

 fetch(`/loadbox/${message.id}`) 
.then(response => response.json())
.then(dialog => {
   
    let detailcontent=
     `<div class="hepsi">
    <div class="sender">
    <h3>${dialog.sendername}</h3><br>
     @${dialog.sender}</div> 
    <p class="posting msj"> ${dialog.content}</p>
     <p class="posting rep"> ${dialog.reply}</p> // Here I have a list named replies and I want 
      to loop through all elements and display every reply for that particular message.
     <br> 
     <div class="m-form">
     <form class="form-control">
     <input class="msj-i" type="text" placeholder="Start a new message"></input>
     <input type="submit" value="Send" class="msj-s"></input>
     </form> </div></div>` ;
    document.querySelector('#message-view').innerHTML=detailcontent;
    document.querySelector('.msj-s').onclick = function() {
        sender=`${dialog.sender}`
        reply_message(sender);
        }
    })
}

so where I fetch the data /loadbox/message.id, I have this data for example:

   {"replies": ["hi there", "haha", "last"],"sendername": "Bilge", "sender": "bilge", "content": "hi"}

As you see replies is a list and I want it to loop through in the HTML template. However, I use dynamic content in my javascript code. Normally in Django template, I would easily do

             {% for reply in replies %}
         {{reply }} 
              { % endfor %}

However, I am writing a dynamic html with this method:

    content = `"some content"`

    document.querySelector(".message-view").innerHtml = content

So I need to loop this through inside of the content I think. I tried:

           {for (${reply} of ${replies})}
         <p class="posting rep"> ${reply} </p>

it gave this error. Uncaught (in promise) ReferenceError: reply is not defined Or I tried :

        {% for ${reply} in ${replies} %}
      {{reply}}
          {% endfor %}

but it gives the error:

   Couldn't parse the remainder of ${replies}

So I am not sure if this is even possible, If you have any suggestions for changing my logic or etc I would be appreciated.

For demonstration; If click on a message on the left, it opens up the message on the right, you can reply to it, And I want it to display all of the replies there. Currently, it is undefined because I put whole list not the elements.

Emiel Zuurbier · Accepted Answer · 2020-09-02 14:09:42Z

Inside template literals you can use the Array.prototype.map() method to loop over the replies and return a string for each reply. Now you'll have an array with strings in them. Last step is to turn the array into a combined string with the Array.prototype.join() method. Use an empty string as separator to join the strings together.

fetch(`/loadbox/${message.id}`) 
    .then(response => response.json())
    .then(dialog => {
       
        let detailcontent = `
            <div class="hepsi">
                <div class="sender">
                    <h3>${dialog.sendername}</h3>
                    <br>
                     @${dialog.sender}
                </div> 
                <p class="posting msj">${dialog.content}</p>
                ${dialog.replies.map(reply => 
                    `<p class="posting rep">${reply}</p>`
                ).join('')}
                <br> 
                <div class="m-form">
                    <form class="form-control">
                        <input class="msj-i" type="text" placeholder="Start a new message">
                        <input type="submit" value="Send" class="msj-s">
                    </form> 
                </div>
            </div>
        `;

        document.querySelector('#message-view').innerHTML = detailcontent;
        document.querySelector('.msj-s').onclick = function() {
            sender = `${dialog.sender}`
            reply_message(sender);
        }
    });

Collectives™ on Stack Overflow

For loop inside of Javascript dynamic Html content in Django

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related