How do I use Django queryset in jQuery/javascript

Question

I am trying to implement Django queryset in jQuery/javascript. I was able to get the list of all users but i could not get the users profile picture. Username display, but users image do not display as an image, it display as a text ( John). How do i get the users profile picture for each user? This is what i tried:

class Profile(models.Model):
    user = models.OneToOneField(settings.AUTH_USER_MODEL,on_delete=models.CASCADE,blank=True,null=True)
    profile_pic = models.ImageField(upload_to='ProfilePicture/', default="ProfilePicture/user-img.png", blank=True)

def home(request):
    all_img = Profile.objects.all()
context = {
    'all_img': all_img,
}

$(function() {
var availableTags = [
  {% for user in all_img %}{% if user.profile_pic %}
    "<img src='{{ user.profile_pic.url }}'>" + "{{user|safe}}", 
  {% endif %}{% endfor %}
];

$(".autocomplete").autocomplete({
source: availableTags,
})
});


STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

score 0 · Answer 1 · answered Jun 13 '20 at 12:53

0

I am thinking that the issue with the Media URL and Media Root And please provide a proper code structure Django MEDIA_URL and MEDIA_ROOT

answered Jun 13 '20 at 12:53

Shubham K.

67
1
9

The media_url and root is setup properly, images display when i do this in template, but it does not display when i do this in jquery/javascript. I will update my media url and root. – MrHize Jun 13 '20 at 12:56
Once try this ""+{{user|safe}} – Shubham K. Jun 13 '20 at 13:01
Wait first tell me what are you storing in availableTags?? – Shubham K. Jun 13 '20 at 13:03
I am using autocomplete to get all list of users and their profile pic, I am using availableTags as the source. So that when i type 'a' in the search box, it dropdown all users name which contains 'a'. I added + to img src, it still does not work – MrHize Jun 13 '20 at 13:07
I also made another post before, but that displays default image and not the profile picture of the users. This is the link: https://stackoverflow.com/questions/62356707/autocomplete-with-username-and-image – MrHize Jun 13 '20 at 13:08
Before Try to print with console if it is printing correctly then store else store some URL by manually typing source path. Try to print the availableTags in console see what is the output – Shubham K. Jun 13 '20 at 13:17
I do not understand what you mean. can you please explain with codes? – MrHize Jun 13 '20 at 13:19
console.log({% for .... (between code) endfor %}) or var availableTags = [ "" + "ABC", "" + "DEF" ] – Shubham K. Jun 13 '20 at 13:22
I am getting list of all user profile pic in console.log. – MrHize Jun 13 '20 at 13:31

How do I use Django queryset in jQuery/javascript

1 Answers1