CODEWITHSUNDEEP
javascriptjquerypythondjangodictionary
Yax
Yax

Reputation: 2189

How Do I Get Python Dictionary to Fill HTML Select Option with jQuery?

If a user selects a #bundle, it takes the request through Ajax to this Django view.

@ensure_csrf_cookie
def getcourses(request):
    if request.is_ajax():
        id = int(request.POST['cat_id'])
        try:
            courses = Courses.objects.values('id', 'name').filter(cat_id = id)
        except Courses.DoesNotExist:
            courses = None
        if courses:
            message = courses
            return HttpResponse(message)
        else:
            message = 'Please select a valid bundle...'
            return HttpResponse(message)
    else:
        return HttpResponseRedirect(reverse('mysite:index'))

The view returns this dictionary:

{'id': 1L, 'name': u'Python'}
{'id': 2L, 'name': u'Django'}
{'id': 3L, 'name': u'jQuery'}
{'id': 4L, 'name': u'Ajax'}

How do I remove these Ls?

What I want is to have this dictionary iterated over in jQuery and have them as options under #courses in my HTML.

<div class="control-group">
    <label class="control-label" for="selectbasic">Select a bundle...</label>
    <div class="controls">
        <select id="bundle" name="bundle" class="form-control input-xlarge">
            <option class = 'selected-value' value = '1'>Web Design</option>
            <option class = 'selected-value' value = '2'>Mobile Apps</option>
        </select>
        <select id="courses" name="courses" class="form-control input-xlarge">
        </select>
    </div>
</div>

My jQuery code:

$(document).on('change', '#bundle', function(){
    var $this = $( this );
    var $cat_id = $this.val()
    if ($cat_id.length > 0){
        var request = $.ajax({
          url: "/mysite/fetchcourses/",
          type: "POST",
          data: { cat_id : $cat_id },
          dataType: "html"
        });
        request.done(function( msg ) {
            $.each(msg, function (i, item) {
                $('#courses').append($('<option>', { 
                    value: item.id,
                    text : item.name 
                        }));
                    });
        });
        request.fail(function(XMLHttpRequest, textStatus, errorThrown){
            alert('errorThrown '+ errorThrown);
        })
    }
})

How do I get the dictionary data iterated over and have them as option under #courses? Any help will be appreciated.

Upvotes: 0

Views: 1819

Answers (1)

Isaac Ray
Isaac Ray

Reputation: 1361

Convert it to json.

import json 

... 

 if courses:
        message = list(courses)
        response =  HttpResponse(json.dumps(message), content_type ='application/json' )
        return response

Now you can treat your response like a javascript object.

Upvotes: 2

Related Questions