Unable to display information using ajax django

Question

i am trying to display sizes using ajax but it does not show up after the ajax success

here is ajax script

<script type="text/javascript">
    function getStoreView(event, productId) {
        event.preventDefault();   
        var data = {
           productId : productId
        }
        // Send productId as query param of url
        $.ajax({        
            type: "GET",
            url: "{% url 'storeView'  user=store.user %}",
            data: data,
            success: function(data) {
              var html = "";
              $.each(data.sizes, function(index,sizes) { 
              console.log(sizes.value) 
            });
            },

            error: function(response, error) {
                alert(error);  
            }
        });
    };
</script>

here is the template

    <form id="form" action="{% url 'storeView'  user=store.user %}" method="post"  />
                      {% csrf_token %}          

                      <div class="increment">
                      {% for size in sizes %}

                      <strong class="pull-left">{{size}}:</strong> 
                      <input type = "number" name="quantity" value="{{product.quantity}}">
                      <input type = "hidden" name = "size" value="{{size}}">
                      <input type = "hidden" name = "productid" value = "                              {{product.id}}">
                       {% endfor %}
                      </div>
                      <input type="submit" value="submit" id="submit"/>
                     </form>

here is views.py

if request.user.is_authenticated():
        productid = request.GET.get('productId')
        if request.is_ajax():
            try:
                sizes = StoreProduct.objects.get_size(productid)
            except:
                sizes = None

            sizes = list(sizes.values())

            data = {
            "sizes" : sizes
            }

            return JsonResponse(data)

i am able to console log the sizes but how do i display them in forloop?

based on Hybrid's answer the following traceback is generated

File "C:\Python27\lib\site-packages\django\core\handlers\base.py" in get_response
  132.                     response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "C:\Users\lenovo\Desktop\plump\Plumpin\src\store\views.py" in StoreView
  61.           return render(request , "store/storeform.html" , {'sizes' : sizes})
File "C:\Python27\lib\site-packages\django\shortcuts.py" in render
  67.             template_name, context, request=request, using=using)
File "C:\Python27\lib\site-packages\django\template\loader.py" in render_to_string
  99.         return template.render(context, request)
File "C:\Python27\lib\site-packages\django\template\backends\django.py" in render
  74.         return self.template.render(context)
File "C:\Python27\lib\site-packages\django\template\base.py" in render
  209.                     return self._render(context)
File "C:\Python27\lib\site-packages\django\template\base.py" in _render
  201.         return self.nodelist.render(context)
File "C:\Python27\lib\site-packages\django\template\base.py" in render
  903.                 bit = self.render_node(node, context)
File "C:\Python27\lib\site-packages\django\template\debug.py" in render_node
  79.             return node.render(context)
File "C:\Python27\lib\site-packages\django\template\defaulttags.py" in render
  507.                         six.reraise(*exc_info)
File "C:\Python27\lib\site-packages\django\template\defaulttags.py" in render
  493.             url = reverse(view_name, args=args, kwargs=kwargs, current_app=current_app)
File "C:\Python27\lib\site-packages\django\core\urlresolvers.py" in reverse
  579.     return force_text(iri_to_uri(resolver._reverse_with_prefix(view, prefix, *args, **kwargs)))
File "C:\Python27\lib\site-packages\django\core\urlresolvers.py" in _reverse_with_prefix
  496.                              (lookup_view_s, args, kwargs, len(patterns), patterns))

Exception Type: NoReverseMatch at /store/storeView/zara/
Exception Value: Reverse for 'storeView' with arguments '()' and keyword arguments '{u'user': ''}' not found. 2 pattern(s) tried: ['store/storeView/(?P<user>[\\w-]+)/$', 'store/storeView/(?P<user>[\\w-]+)/$']

Answer 1

So what you are trying to do requires you to merge the AJAX response with a for-loop, so you would need it processed by Django. The only way to do this is to return a render() response instead of a JSONResponse, and then append that to your html. For example:

Create a new HTML file called _store-form.html:

<form id="form" action="{% url 'storeView'  user=store.user %}" method="post"  />
                  {% csrf_token %}          

                  <div class="increment">
                  {% for size in sizes %}

                  <strong class="pull-left">{{size}}:</strong> 
                  <input type = "number" name="quantity" value="{{product.quantity}}">
                  <input type = "hidden" name = "size" value="{{size}}">
                  <input type = "hidden" name = "productid" value = "                              {{product.id}}">
                   {% endfor %}
                  </div>
                  <input type="submit" value="submit" id="submit"/>
</form>

In your views.py, instead of the last line return JsonResponse(data):

return render(request, '_store-form.html', {'sizes': sizes})

and now amend your JS to append the new returned html into your page:

<script type="text/javascript">
    function getStoreView(event, productId) {
        event.preventDefault();   
        var data = {
           productId : productId
        }
        // Send productId as query param of url
        $.ajax({        
            type: "GET",
            url: "{% url 'storeView'  user=store.user %}",
            data: data,
            success: function(data) {
              $('body').append(data);
            },

            error: function(response, error) {
                alert(error);  
            }
        });
    };
</script>

Answer 2

Django template variables are passed from views.py through the context, while ajax is fetching value from somewhere else. Django template variable and javascript variables are two different things, you cannot expect them to work together. You need to use javascript to render the form manually. Take a look at jquery doc for details.