Django pass Python Object from view to Javascript script in template

Question

This is a simple code created only to show the probem, obviusly the task that this simple code is trying to do can be done without Javascript, but I need to know how I can do this using Javascript, because In my real code I need it, and It cant't be done without Javascript (basically I create a dinamic 2D array with information from the view)

in view.py

in def play_game function

...
players = Player.objects.all()
context = {
    'players' : players
}
return render(request,'play_game.html', context)

in model.py

  class Player(models.Model):

    game = models.ForeignKey(Game, on_delete=models.CASCADE, blank=True, null=True)
    loose = models.IntegerField( default=0)
    win = models.IntegerField(default=0)
    name = models.CharField(max_length=9)

In play_game.html

 <script>
var players = "{{players}}";
for (player in players) {
    document.write(player.name);
    document.write("  Win:"+ player.win); 
    document.write("Loose: " + player.loose); 
};
</script>

I dont't know what that It means. I want to have the object players in the script and use it like a python objetct. Example: — MoonLover, Dec 19 '16 at 00:50

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

You need to serialize your data (players).

from django.core import serializers
...
players = serializers.serialize("json", players)
...
return render(request, 'template.html', {'players': players, ...})

and in your template/script

<script>
var players = {{ players || safe }};
players.map(function (player) {
    document.write(player.name);
    document.write("  Win:"+ player.win); 
    document.write("Loose: " + player.loose); 
});
</script>

see SO 1 and SO 2

edited May 23 '17 at 12:30

Community

1
1

answered Dec 19 '16 at 00:57

rwx

696
8
25

and How do I do this ? document.write(player.name); If I do document.write(players); I see: [{"model":"game.game,"fields"{"name":"Bob", "win":3,"loose":2} }] – MoonLover Dec 19 '16 at 01:50

Django pass Python Object from view to Javascript script in template

1 Answers1