UUID from django database to Javascript that changes link based on current page

Question

I made a wordlegolf game that tracks your scores and one user can have multiple scoreboards. I am trying to have arrows that lets you rotate through your scoreboards. image of arrows

So I need to be able to track which scoreboard the user is currently on and rotate through each scoreboard

I've tried a bunch of things and was able to get it to work but now that I have implemented UUIDs I am getting a bunch of errors with my javascript. I tried adding this UUIDEncoder class which I saw online but that hasnt helped.

views.py

newlink = []
links = list(CreatedScoreboardUnique.objects.filter(players=request.user))
for link in links:
    newlink.append(link.pk)
newlink = json.dumps(newlink, cls=UUIDEncoder)

class UUIDEncoder(json.JSONEncoder):
    def default(self, obj):
        if isinstance(obj, UUID):
            # if the obj is uuid, we simply return the value of uuid
            return obj.hex
        return json.JSONEncoder.default(self, obj)

html

<svg width="37" height="37" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" onclick="nextScoreboard()">
     <path d="M15.0378 6.34317L13.6269 7.76069L16.8972 11.0157L3.29211 11.0293L3.29413 13.0293L16.8619 13.0157L13.6467 16.2459L15.0643 17.6568L20.7079 11.9868L15.0378 6.34317Z" fill="currentColor"/>
</svg>

javascript

function nextScoreboard(){

    console.log('next clicked')
    var links = JSON.parse("{{links|safe}}")
    var currId = "{{scoreboard.id}}"
    var nextlink = false

    for(i = 0; i < links.length; i++){
        if(links[i] == currId){
            window.location.href = "http://127.0.0.1:8000/scoreboard/" + links[i+1]
            
        }
    }
}

This is the error I keep getting and cant figure out

Is there an easier way to do this or can you help with the error?

Where have you put your javascript ? Clearly the function nextScoreboard cannot be found. You can take a look here: https://stackoverflow.com/questions/17378199/uncaught-referenceerror-function-is-not-defined-with-onclick . — Arif Rasim, Feb 09 '23 at 15:44
That error was caused by something else in the code, I updated the error picture. Im still have trouble turning the UUID from views into a link — Kyle Flannelly, Feb 09 '23 at 16:10

score 1 · Answer 1 · answered Feb 09 '23 at 22:22

I figured out a way to make this work although I am sure there is a better way to do this.

I got rid of the json dumb and just cast to a string

views.py

newlink = []
links = CreatedScoreboardUnique.objects.filter(players=request.user)
for link in links:
    newlink.append(str(link.pk))

Then for javascript I replaced the extra characters when I JSON.parse to get rid of the errors I was getting

javascript

function nextScoreboard(){
    var links = JSON.parse("{{links}}".replace(/&#x27;/g,'"'))
    var currId = "{{scoreboard.unique_id}}"
    for(i = 0; i < links.length; i++){
        if(links[i] == currId){
            if(i+1 != links.length){
                window.location.href = "http://127.0.0.1:8000/scoreboard/" + links[i+1]
            } else {
                window.location.href = "http://127.0.0.1:8000/scoreboard/"
            }
        }
    }
}

So basically removing those ' characters allowed me to create the format I needed to make this work

UUID from django database to Javascript that changes link based on current page

1 Answers1