Can't get data from Json array via an ajax get request - json

Question

I am having a hard time getting the correct field out of an object from an ajax get request. The ajax request is in a Django app and corresponds with the view. The line:
console.log(data);
displays all the data in the object. I am trying to output the username in console.log() but I am not able to get it done.
I tried many variations i.e. I used filter instead of get in the Django view section. I tried to for loop over the data and use [i] but so far nothing worked.
Hopefully someone has an idea on how to solve this issue. I attached the django view, the template view and the chrome dev tools console output.
The django section view:
def Data(request, user_id):
if request.is_ajax():
sidebar_data = serializers.serialize("json",
[User.objects.get(id=user_id)])
return HttpResponse(
JsonResponse({'sidebar_data': sidebar_data}),
content_type="application/json"
)
return HttpResponse("not a ajax request")
The template view:
$( ".test{{ user.user.id }}" ).click(function() {
$.ajax({
url : ‘xxx/‘,
dataType : 'json',
method : 'GET',
success: function(data)
{
// this works - outputs all data
console.log(data);
// this does not work
console.log(data.sidebar_data.fields[1].username);
},
failure: function(){
}
});
});
The output for the browser in chrome console:
Object {
sidebar_data: "[{"fields": {"username": “xxx”, "first_name": “xxx”}, "model": "auth.user", "pk": 989}]”}
If i use console.log(data.sidebar_data); i get the following output which is a step closer. But as soon as i try any combination with fields or username i get the undefined error.
[{"fields": {"username": “xx”, "first_name": “xxx”}, "model": "auth.user", "pk": 989}]

Answer 1

change views.py like this:
from django.core import serializers
def data(request):
if request.is_ajax():
user = User.objects.filter(id=1)
data = serializers.serialize('json', user)
return HttpResponse(data, content_type ="application/json")
return HttpResponse("not a ajax request")
and change template like this:
$( ".test{{ user.user.id }}" ).click(function() {
$.ajax({
url : ‘xxx/‘,
dataType : 'json',
method : 'GET',
success: function(data)
{
console.log(data[0].fields.username);
},
failure: function(){
}
});
});

Answer 2

Try data[1].fields[1] instead of data.sidebar_data.fields[1].username