CODEWITHSUNDEEP
jqueryajaxdjango
rgm
rgm

Reputation: 1281

render django dictionary with ajax

how can i populate the select tag or ul and li tag with ajax request sent to django and it returns json ( may also be from a model ). i do not want to use another template for populating these.

example :

if the return is data from ajax request

how can i do this :

      <select id = 'carid'>
            {% for car in cars %}
                     <option value="{{ car.name }}">{{ car.name }}</option>
            {% endfor %}
        </select>

but i do not want to return html from django or load another html only for this tag.

This is my Response method 

 def car_view(request)

    car_obj = cars.objects.get(name = car)

    allmodels = CarModel.objects.filter(car = car_obj)

    data = serializers.serialize("json", allmodels)

    return HttpResponse(data)

this is how data looks like 

[{"pk": 3, "model": "alongjs.carmodel", "fields": {"car": 2, "name": "city-unlimited"}}, {"pk": 4, "model": "alongjs.carmodel", "fields": {"car": 2, "name": "hill-to-city"}}]`

Upvotes: 1

Views: 729

Answers (1)

dannymilsom
dannymilsom

Reputation: 2406

If you are sending an ajax request with jQuery.ajax() (looks like you are judging from previous questions) - you can add some JavaScript inside the success callback function to iterate over the JSON response and populate your select options.

$.ajax({
  type: 'GET',
  url: ...,
  data: {},
  success: function(data) {
    $.each(data, function() {
      $('#carid')
        .append($("<option></option>")
        .attr('value', this['fields']['name'])
        .text(this['fields']['name'])); 
    });
  }
});

You can see a contrived fiddle example here.

You can probably improve your JSON though - as all you need is the car name.

Upvotes: 1

Related Questions