[ Get error or an empty value while trying for passing id from django template to reactjs ]

I am getting an error saying unexpected token while trying for passing id from django template to reatjs for uploading multiple images to its associated foreign key object. The error is shown as unexpected token }. In depth it is shown as
in console

var uploadUrl = {
        url: 
};

What i am trying to do is , I have created a listing page with multiple form and it is entirely developed using reactjs. I want user to fill the data about room and upload multiple images related to their room. There are two models one with room info and another gallery(multiple image is associated with one rent). I wanted the uploaded images be associated with its rent so i coded it as below

urls.py

urlpatterns = [
    url(r'^add/$', AddView.as_view(), name="add"),
    url(r'^add/space/$', AddSpaceView.as_view(), name="addSpace"),
    url(r'^upload/image/(?P<pk>\d+)/$', ImageUpload, name="ImageUpload"),
]

views.py

def ImageUpload(request,pk=None): // for saving images only to its asscoiated rent

    if request.POST or request.FILES:
        rental = Rental.objects.get(id=pk)
        for file in request.FILES.getlist('image'):
            image = GalleryImage.objects.create(image=file,rental=rental)
            image.save()
        return render(request,'rentals/add.html')


class AddView(TemplateView): // for listing page 
    template_name = 'rentals/add.html'

class AddSpaceView(View): // for saving data to database except image 
    def post(self,request,*args,**kwargs):
        if request.POST:
            rental = Rental()
            rental.ownerName = request.POST.get('ownerName')
            rental.email = request.POST.get('email')
            rental.phoneNumber = request.POST.get('phoneNumber')
            rental.room = request.POST.get('room')
            rental.price = request.POST.get('price')
            rental.city = request.POST.get('city')
            rental.place = request.POST.get('place')
            rental.water = request.POST.get('water')
            rental.amenities = request.POST.get('amenities')
            rental.save()
        return HttpResponseRedirect('/')

listing.js(ajax code for uploading multiple image)

var image = [];
image = new FormData(files);
$.each(files,function(i,file){
  image.append('image',file);
});
$.ajax({
    url:"/upload/image/", // want to used id over here that is passed from add.html script tag so that image will be uploaded to its associated foriegn key object
    data:image,
    contentType:false,
    processData:false,
    type:'POST',
    mimeType: "multipart/form-data",
    success: function(data) {
      console.log('success');
    }
});
}

add.html page

<div id="listing">
 </div>


{% include 'includes/script.html'%}
<script type="text/javascript">
    var uploadUrl = {
        url: {% for rental in object_list %} { "id": {{ rental.id }} } {% endfor %} // here is an error
    };
    console.log('url is', url); 
    $(function() {
      app.showListingSpaceForm("listing");
    });

</script>

The code might explained what i was trying to achieve. If models.py is also required for more scrutiny then i will update it.

Answer 1

You're missing a fundamental piece: TemplateView has no concept of object_list, you have to populate it yourself. If your view is simple enough use ListView and set your model property. If not, you have to manually populate the object list, something like this:

def get_context_data(self, **kwargs):
    context['object_list'] = MyModel.objects.all()

That was just an example to set you on the right path.