How can I link from homepage to another details page depending on a specific argument in for loop? - Django (tourist attraction project)

I am learning django and during a project given I’ve stuck in linking the home.html to details.html

Here are a link to my course : My tourist attraction project

My code is the following:

urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.home, name="home"),
    path('details/<statename>', views.details, name='details')
]

views.py

from django.shortcuts import render

# This is the dictionary for all the attractions
attractions = [
  { 'attraction_name' : 'Niagra Falls', 'state' : 'New York'},
  { 'attraction_name' : 'Grand Canyon National Park', 'state' : 'Arizona'},
  { 'attraction_name' : 'Mall of America', 'state' : 'Minnesota'},
  { 'attraction_name' : 'Mount Rushmore', 'state' : 'South Dakota'},
  { 'attraction_name' : 'Times Square', 'state' : 'New York'},
  { 'attraction_name' : 'Walt Disney World', 'state' : 'Florida'}
]

def home(request):
  # The context is all of the variables we want passed into the template.
  context = {"attractions" : attractions}
  return render(request, 'tourist_attractions/home.html', context)

def details(request, statename):
  # We replace the dash with a space for later ease of use. The dash is there because of the slugify filter.
  context = {"attractions" : attractions, "statename" : statename.replace("-", " ")}
  return render(request, 'tourist_attractions/details.html', context)

home.html

{% extends "tourist_attractions/base.html" %}
{% load static %}

{% block head %}
<link rel="stylesheet" href="{% static 'tourist_attractions/style.css' %}">

{% endblock %}

{% block content %}
<h1>This is a list of attractions in America!</h1>
<table>
  <tr>
    <th>Attraction</th>
    <th>State</th>
    <th>State details</th>
  </tr>
  {% for item in attractions|dictsort:"state" %}
  <tr>
    <!-- included in the task -->
    <td>{{ item.attraction_name }}</td> 
    <td>{{ item.state }}</td> 
    <!--Not in the task but I assumed that after clicking each link, the link should lead the user to that details/<statename> url-->
    <td><a href="{% url 'details' statename=item.state %}">click here</a></td> 
  </tr>
  {% endfor %}
</table>
{% endblock %}

What I have done so far are Task 1 - 12 (to generate a table with 3 columns header but only 2 data columns are generated through the for loop. (Then , I added links for each attractions by myself) After that I have created details.html of which if I type the url details/arizona or details/new-york, the url details/ works well.

The problem is I cannot click the link from the home page to details page when states’ names have space in names, for example, when I want to see more details for Times Square in ‘New York’. I would like to know how I can link from home to details/ correctly.

Thanks

1 Like

Did you manage to solve it? I am having the same problem.

Yes, I saw it later in the very later exercise.

<td><a href="{% url 'details' item.state|slugify %}">click here</a></td>

But actually it is not the only way.

Thanks, it was driving me insane.

1 Like

Got the same mistake.