Todo App | Django REST Framework & Ajax

Creating a To-Do app with the Django REST Framework. We will use the API we build out in the previous video to handle the front end with vanilla JavaScript.

[imsKo]

I want to thanks you for the amazing tutorial. Thanks to you, I was able to have a better understanding on how to attach both Django and JS together which I didn't know before.

Also, for those who wish to understand the problem that occurs at 30:35. I believe the reason the event listeners aren't working is because the wrapper.innerHTML is creating a whole new string each time it iterates through the for loop. When you create a whole new string, you lose the reference to all the previous event listeners that you have added because wrapper.innerHTML has been rewritten entirely again (it created an entire new string).

A good example to compare would be creating a variable inside a for loop and the variable overwriting itself on each for loop.

Now, as to why only the last button ends working, it's because on the last iteration of the for loop. You apply an 'addEventListener' to the last index [i] of wrapper.innerHTML and there isn't another iteration afterwards that would overwrite wrapper.innerHTML.

To avoid creating a new string on each iteration (which can slow down the performance if a string gets too big and it has to copy itself over and over again). I learned the method 'insertAdjancentHTML' doesn't create a whole new string through each iteration, instead it injects (or inserts) the new html directly into the original html which is like 100 times faster.

The solution at 31:12 would be to replace:

wrapper.innerHTML += item
to
wrapper.insertAdjacentHTML('beforeend', item)

Like below:

var list = data
for (var i in list) {

var item = `
<div id="data-row-${i}" class="task-wrapper flex-wrapper">
<div style="flex:7">
<span
</div>
<div style="flex:1">
<button class="btn btn-sm btn-outline-info edit">Edit</button>
</div>
<div style="flex:1">
<button class="btn btn-sm btn-outline-dark delete">-</button>
</div>
</div>
`

wrapper.insertAdjacentHTML('beforeend', item) // Inside the element, insert after its last child.


var editBtn =
editBtn.addEventListener('click', function() {
editItem()
})

[scarletlady]

The year is 2023, and the javascript error with editbtn and the for loop, has been moderated. Now the original code works fine now. `for(let i in list){let editbtn = editBtn.addEventListener('click', function(){ editItem(list[i]); }` works fine now in Javascript. Big fan of your videos Dennis! Much love from Nigeria

[abhisheknautiyal]

I can't thank you enough for the quality content you make. These videos definitively deserve a lot more views and likes. You just got a subscriber. Cheers mate.

[ryan_]

I liked the video before I watch it.
Thanks for your consistency and regularity Dennis

[norbertmarko]

Your videos are mad good, you somehow always upload what I need, and after watching your explanations I can always start to work off of them.

[themax]

This was so cool. I didn't know much at all about webdev going into this, but it was still easy to follow and now I feel like I'll be able to use the django rest framework for the backend of my android app

[chaitanyaasati]

Thank you for creating same project in Django without Rest Framework, Django with Rest Framework and React+Django. It helped a lot.

[TheAremoh]

What a way to say good morning to me. Thank you Denis

[NLesly]

I admit that this is one of the best videos I have ever watched. Thanks very much Dennis Ivy
Look forward to watch that of React

[khongthefork]

At 53:45, instead of writing out a for loop just for 1 element, you can just remove the last extra element with

- 1}`).remove();

[nitishbhardwaj]

Thank you so much @Dannis for this session, I just now completed this, growing my skills from here...

[realdaly]

I love how u try to fix the problems and keep going with the tutorial <3

[kennedywee]

Dennis Ivy, I wanted to tell you that you are doing amazing work with your tutorial! Tell me if you got any blogs or your own tutorial website! Can't get enough of your brilliant contents. Keep the good work! Thank you very much

[sathyanarayanan]

At 31:00, you're creating a variable within a loop. If you do that the variable you've created would be deleted or overwritten in the next iteration. So each time the loop was looping, the variable was getting overwritten like second was overwritting first, third overwritting second ... sixth overwritting fifth and that's why you were left with the last one. Instead you could've created the variable outside the for loop and could've appended the data. That way you could've avoided the second for loop.

[Arbadjie]

Am loving this. I am gonna start implementing javaScript and react to my channel. Thanks, Dennis

[japsimransingh]

Love your django tuts
You just explain it perfectly.

[shirleysiu]

34:36 you may use let instead of var to avoid the complicated nest function calls, but you would lose some backward compatibility with older browsers

[irinsajan]

Something that I really wanted! You are doing a great job :) Thank you for this content.

[vickyful]

Thank you for this amazing tutorial, I have a better understanding of DRF now.

There is an alternative solution for CSRF token that is:

let csrftoken =
then send this to the fetch header.

[abhinavjha]

what is the use of making rest framework in the backend if we can do all the CRUD operation from django-admin panel. Are both different? please reply to me .