title: Access Field Values from JSON serialized django object
body: <p>I have a problem which is proving to be harder to find an answer for than I imagined.  I am using AJAX to update the select options based on a response from another select box.  I am able to correctly retrieve the right list of objects, serialized as json, but I can't access any of the field values of the object.</p>
  
  <p>View:</p>
  
  <pre><code>def choose_group(request):
  team_id = request.POST['team_id']
  
  groups = WorkoutGroup.objects.filter(team_id=team_id)
  data = serializers.serialize('json', groups)
  
  return HttpResponse(data, content_type='application/json')
  </code></pre>
  
  <p>Javascript/jQuery:</p>
  
  <pre><code>$('#team').on('change', function(){
              var team_id = $(this).val();
              $.ajax({
                  type: 'POST',
                  url: '/create_workout/choose_group/',
                  dataType: 'json',
                  async: true,
                  data: { csrfmiddlewaretoken:'{{ csrf_token }}', team_id: team_id },
                  success: function(data) {
                      var groups = $('#group');
                      $(groups).children().not(':first').remove();
                      if (data.length &gt;= 1){
                          $.each(data, function(group){
                              $(groups).append('&lt;option value=' + group['fields']['id'] + '&gt;' + group['fields']['group_name'] +  '&lt;/option&gt;');
                          });
                      }
                  }
  
              }); 
          })
  </code></pre>
  
  <p>I get an error with all the ways I've tried to access the fields of each object (such as the id and group_name of the objects, as defined in the model).  The error is 'cannot read property of undefined'.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have also tried just creating a ValueQuerySet and dumping it using simplejson, but I still cannot access any fields within, just 'undefined'.  Also, if I alert through each group, I get just the index of the iteration within the group list.</p>
  
  <p>New View:</p>
  
  <pre><code>def choose_group(request):
  team_id = request.POST['team_id']
  
  groups = WorkoutGroup.objects.filter(team_id=team_id).values('id','group_name')
  #data = serializers.serialize('json', groups)
  
  return HttpResponse(simplejson.dumps(list(groups)), content_type='application/json')
  </code></pre>
  
  <p>and my Javascript now looks like this:</p>
  
  <pre><code>$('#team').on('change', function(){
              var team_id = $(this).val();
              $.ajax({
                  type: 'POST',
                  url: '/create_workout/choose_group/',
                  dataType: 'json',
                  async: true,
                  data: { csrfmiddlewaretoken:'{{ csrf_token }}', team_id: team_id },
                  success: function(groups_list) {
                      var groups = $('#group');
                      $(groups).children().not(':first').remove();
                      if (groups_list.length &gt;= 1){
                          //json = JSON.parse(data);
                          $.each(groups_list, function(group){
                              alert(group)
                              $(groups).append('&lt;option value=' + group.pk + '&gt;' + group.fields.group_name +  '&lt;/option&gt;');
                          });
                      }
                  }
  
              }); 
          })
  </code></pre>