Iterating over a list of django created objects in Javascript, is it possible? Template language in Javascript

Question

My site can't run a successful for-loop created in django for a list model that I have sent to a page. I was going based off of Derek's answer in this stackoverflow question and some other things I found. But right now... It seems that my browser (Google Chrome if that helps) can't seem to render the {% for %} loops that I attempt to run in javascript on my html file.

I have two python/django created two list models, booklist_greek and booklist_latin that are sent to my textlist.html file. These lists contain sorted 2-tuples, each tuple having the title of a book as the first element and the type of the book as a second element. Using template-language in html to run a for loop works just fine at two parts in my html file.

There's a point in my code where I would like to filter booklist_greek and booklist_latin based on the booktype of each book, and use that to populate a <select> element. This filtering and populating needs to happen when a user clicks buttons. So I assumed javascript would be necessary... But I also needed template language to somehow filter the lists.

I approached it like so. But this doesn't work.

var latinBooks = $("#latinTextsDropDown");                                 
$("#latinTextsDropDown").children().remove();
{% for each in booklist_latin %};
var bookTitle = {{ each.0 }};
var bookType = {{ each.1 }};
if (bookType == filteringType) {
    var opt = document.createElement("option");
    opt.value = bookTitle;
    opt.name = bookType;
    ...                                           
$("#latinTextsDropDown").appendChild(opt);
}
{% endfor %};

I even tried reducing the contents of the {% for %} loop to just be the following: console.log({{ each.0 }}) but that failed as well. However if I make the for-loop contain no template-language, so for instance if it only had console.log("hello world!"); then that actually works. Any template language calls to the objects that are being iterated over, and interestingly enough... No java code within my <script> tag runs at all.

So now I need an alternative, or I need to figure out what I'm doing wrong. I understand that what I was doing was pretty odd from the start. But is there another way to iterate over objects within booklist_latin and booklist_greek? And to check what is actually in each tuple with each iteration?

Tom Headifen · Accepted Answer · 2017-06-23 03:23:59Z

0

You can only use python in html. This is because it gets rendered on the server before it is sent to the client (chrome). In your case js is used for handling logic on the client side (chrome). Knowing this you have two options:

Use the python in the html to loop through your books. You create a filter which calls the action that rendered the page but you pass a parameter that specifies what you want to filter. Python will do a page a page refresh because python has to re-render the html.
Your javascript either does a GET request to your server asking for the books or you send a json encoded array of the books when your page loads. You use js to render the books into the html and your filter calls a js function which will filter the js books array. If you install something like jquery it will help a lot.

Option 1 is probably easier for you and there's most likely documentation in django showing you how to do this. Option 2 is more user friendly.

answered Jun 23, 2017 at 3:23

Tom Headifen

2,0361 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Byron Smith Over a year ago

Alright. I would like to go with option 2 for user friendliness but.... jeez this is going to be hard since I'm still new to javascript and django. I do have jquery. I actually haven't used json before and need to understand it better.

Byron Smith Over a year ago

If there's any resources that are helpful please feel free to link (but if it's just documentation then... I suppose I'll find that on my own)

Tom Headifen Over a year ago

Don't stress about Json, it is just a way of encoding data so that both languages can understand it. Javascript has no idea what a python array is and vice versa so they need something they can both decode to their own array format. In this case json. Try googling 'building a crud page with django and jquery' there will be videos/articles of this that will hold your hand through it. crud stands for 'create read update delete'.

Collectives™ on Stack Overflow

Iterating over a list of django created objects in Javascript, is it possible? Template language in Javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related