CODEWITHSUNDEEP
javascriptpythondjangoajax
vikram
vikram

Reputation: 27

Displaying a python list's values in HTML dropdown using AJAX

I am using Django and AJAX to implement a chained-dropdown. The user will first be prompted to select a brand_name from a dropdown, and depending upon the brand_name selected, all the names of the products that are made by that brand will be displayed in the second dropdown.

views.py

def chained_dropdown(request):
    if request.method == "POST":
        brand = request.POST['brand']
        print(brand)

        sort_by_brand = list(models.Product.objects.filter(brand=brand).order_by('product_id').values('product_id', 'product_name'))

        data = {
            'SortByBrand': sort_by_brand
        }

        return JsonResponse(data)

AJAX request:

var brand = $('#brand').val()

    $.ajax({
        type: "POST",
        url: "/changeddropdown",
        data:{
            "brand": brand,
        }, success: function (data){
           
           // What should I do here?
 
           console.log(data)
        },
    })

templates snippet: This is where I want the product names to be displayed, and the option value should be their corresponding product_id.

<label for="product_id"> Product ID</label>

<select name="product_id" id="product_id">

<option disabled selected="true"> --Select -- </option>

<option value=""> </option>

</select>

For your reference, this is what console.log(data) prints:

{SortByBrand: [{product_id: 31, product_name: "Lotion"}, {product_id: 32, product_name: "Deo"}]}

I am having trouble displaying this information in the template, any help would be greatly appreciated.

Upvotes: 1

Views: 710

Answers (2)

Rushikesh Talokar
Rushikesh Talokar

Reputation: 1585

Below code should work

var brand = $('#brand').val()

$.ajax({
    type: "POST",
    url: "/changeddropdown",
    data:{
        "brand": brand,
    }, success: function (data){
       
       var select = document.getElementById("product_id");
       //clear previous data
       document.getElementById('product_id').innerText = null;
       data.SortByBrand.forEach(function(element, index, list) { 
            var option = document.createElement('option');
            option.text = element.product_name;
            option.value = element.product_id
            select.add(option, 0);
            list[index] = {'name': element}; 
        });

    },
})

Upvotes: 1

Gunjan
Gunjan

Reputation: 1244

You have to handle the response in success callback of Ajax request.

$.ajax({
    type: "POST",
    url: "/changeddropdown",
    data:{
        "brand": brand,
    },
    success: function (data){
       console.log(data);

       // Add below snippet no
       let productSelectBox = $('#product_id');
       const productsData = data.SortByBrand;
       $.each(productsData, function(idx, product) {
           let productOption = $("<option/>", {
               value: product.product_id,
               text: product.product_name
           });
       
       productSelectBox.append(productOption);
       });
    }
});

Django view seems to be working. Although, you can improve your architecture by using Django REST Framework but this is not scope of this question.

Upvotes: 0

Related Questions