How to create a webpage in django that allows the user to select objects, then display stats relating to said objects

Question

I'm currently trying to make a calculator for a video game. I want the user to be able to select characters from the video game, then the webpage calculates stats about the selected character. So far, all I have is a page that displays a list of names of every character in the database so far. I want a user to be able to select a character from the list, then the program grabs data about that character from the database, and does some calculations on it.

I have a solid enough grasp on models.py, and I have pretty much everything I want in there currently working. I'm I have no idea what direction to head in next. My guess is to edit both views and my html files. This is what my views currently looks like. The characters are named units, and think of class like a job class characters can take on if you're familiar with games.

from django import forms
from .models import Unit
from .models import Class
# Create your views here.

def index(request):
    unit_list = Unit.objects.order_by("unit_name")
    context = {'unit_list': unit_list}
    return render(request, 'calc/index.html', context)

def unit(request, unit_id):
    try:
        unit = Unit.objects.get(pk=unit_id)
    except Unit.DoesNotExist:
        raise Http404("Unit does not exist")
    return render(request, 'calc/unit.html', {'unit': unit})

#does calculations based on the selected character
def calcStats(currentUnit, currentClass):
    hp = max(currentClass.hp_class_base, currentUnit.hp_base + currentClass.hp_class_mod + ((currentUnit.hp_growth * currentUnit.unit_level)/10.0) + ((currentClass.hp_class_growth * currentClass.class_level)/10.0))
    hp = min(hp, currentUnit.hp_cap)
    stats = [hp]

#grabs the character and other info from the database
class unitSelect(forms.Form):
    currentUnit = forms.ChoiceField(label="unit", choices=[(unit.id, unit.unit_name) for unit in Unit.objects.all()])
    currentClass = forms.ChoiceField(label="Class", choices=[(Class.id, Class.class_name) for Class in Class.objects.all()])

{% if unit_list %}
    <ul>
    {% for unit in unit_list %}
        <li>{{ unit.unit_name }}</li>
    {% endfor %}
    </ul>
{% else %}
    <p>No units are available.</p>
{% endif %}

Am I on the right track? And what else should I be adding, and what should I be doing next? I tried looking at django tutorials, and I've actually taken some web dev classes in high school and college, but I still feel like I learn nothing every single time. Are there any good resources you recommend? Sorry if it feels like I'm asking too many questions.

Answer 1

Okay let's dive in, First, Your URLs clipped from after .com are called endpoints, Let's call an endpoint in Javascript to get the data

• Add this to your project like you normally do with any JS file, script tags..

• In the character selection, after character gets changed run this

  axios.get('mywebsite.com/my_endpoint/').then((response)=> { // do something with response});

Getting data from the server is simply by using GET-POST requests, You've created the views, now create a urls.py file specific to your app

# myApp/urls.py
from .views import unit # of course this is wrong, I'm just taking unit as example
from django.urls import path
urlpatterns = [
    path('my_endpoint/',unit),
 ]

this is the endpoint we're gonna call GET on, "my_endpoint/", and it will call unit function, Handle the logic of character switch behaviour then return HttpResponse or JSONResponse depending on what you need. Btw, The technique of requesting is called AJAX, Which is ASYNC Javascript, We're calling the server without blocking the client, and waiting for the server's response.

If you're using jQuery for whatever reason, There's no point of using axios, here's an old reply of mine which explains AJAX with jQuery. Here's a side note you'll ask a question about in no time, look at this whenever you need it