In this article, we will show you how to convert a CSV file into an HTML table with header mapping in Django. This is a useful skill to have, as it allows you to easily display data from a CSV file on a webpage. We will be using the Django CSV library to read the CSV file, and the Django template language to create the HTML table. By the end of this article, you will be able to create an HTML table from a CSV file in Django.
Prerequisites
Before we begin, you should have a basic understanding of Django and how to create a Django project and app. You should also have a CSV file that you want to convert to an HTML table. In this example, we will be using a CSV file that contains information about books. The CSV file should have a header row that describes the data in each column. For example:
Title,Author,Publisher,Publish Date
The Catcher in the Rye,J.D. Salinger,Little, Brown and Company,1951-07-16
To Kill a Mockingbird,Harper Lee,J. B. Lippincott & Co.,1960-07-11
1984,George Orwell,Secker and Warburg,1949-06-08
Setting up the Django Project
First, you will need to create a new Django project. You can do this by running the following command:
django-admin startproject myproject
Next, navigate to the project directory and create a new Django app. You can do this by running the following commands:
cd myproject
python manage.py startapp myapp
Now, open the settings.py file in the myproject directory and add the following code to the INSTALLED_APPS list:
INSTALLED_APPS = [
# ...
'myapp',
]
This will tell Django to include the myapp app in the project.
Creating the View
Next, we will create a view that will read the CSV file and pass the data to the template. Open the views.py file in the myapp directory and add the following code:
from django.shortcuts import render
import csv
def csv_to_html(request):
# Open the CSV file
with open('books.csv', 'r') as f:
# Create a CSV reader
reader = csv.reader(f)
# Read the header row
headers = next(reader)
# Create a list to store the data
data = []
# Read the remaining rows
for row in reader:
# Create a dictionary to store the data
row_data = {
headers[0]: row[0],
headers[1]: row[1],
headers[2]: row[2],
headers[3]: row[3],
}
# Add the dictionary to the list
data.append(row_data)
# Pass the data to the template
return render(request, 'csv_to_html.html', {'data': data})
In this code, we first import the csv module, which is a built-in Python library that allows us to read CSV files. We then define a view called csv_to_html, which is a function that takes a request object as its argument.
Next, we open the books.csv file and create a csv.reader object. This object allows us to read the CSV file one row at a time. We then use the next function to read the header row from the CSV file.
After that, we create an empty list called data, which we will use to store the data from the CSV file. We then use a for loop to read the remaining rows from the CSV file. For each row, we create a dictionary that maps the column names to the values in the row. We then add the dictionary to the data list.
Finally, we pass the data list to the template using the render function. This function creates an HTTP response object that contains the data and the template to render it with.
Creating the Template
Next, we will create a template that will display the data as an HTML table. Open the templates directory in the myapp directory and create a new file called csv_to_html.html
<!DOCTYPE html>
<html>
<head>
<title>CSV to HTML Table</title>
</head>
<body>
<table>
<thead>
<tr>
{% for header in headers %}
<th>{{ header }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
{% for value in row.values %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
In this code, we first create an HTML document with the html tag. We then create a head section and add a title element to it.
Next, we create a body section and add a table element to it. We then add a thead element to the table element, which will contain the header row.
Inside the thead element, we add a tr element, which will contain the header cells. We then use a for loop to iterate over the header names and add a th element for each one.
After that, we add a tbody element to the table element, which will contain the data rows. We then use another for loop to iterate over the data and add a tr element for each row.
Inside the tr element, we use another for loop to iterate over the values in the row and add a td element for each one.
Creating the URL
Next, we will create a URL that will map to the csv_to_html view. Open the urls.py file in the myapp directory and add the following code:
from django.urls import path
from . import views
urlpatterns = [
path('csv_to_html/', views.csv_to_html, name='csv_to_html'),
]
In this code, we first import the path function from the django.urls module. We then import the csv_to_html view from the views.py file in the myapp directory.
Next, we create a list called urlpatterns, which will contain the URL patterns for the app. We then add a path function to the list, which maps the URL /csv_to_html/ to the csv_to_html view.
Testing the App
Now that we have set up the app, we can test it to make sure it works. Start the Django development server by running the following command:
python manage.py runserver
Next, open a web browser and navigate to http://127.0.0.1:8000/csv_to_html/. You should see the data from the CSV file displayed as an HTML table.
In this article, we have shown you how to convert a CSV file into an HTML table with header mapping in Django. We have also shown you how to create a view that reads the CSV file, and a template that displays the data as an HTML table. By following the steps in this article, you can easily create an HTML table from a CSV file in Django.
References
| Title | Author | Publisher | Publish Date |
|---|---|---|---|
| The Catcher in the Rye | J.D. Salinger | Little, Brown and Company | 1951-07-16 |
| To Kill a Mockingbird | Harper Lee | J. B. Lippincott & Co. | 1960-07-11 |
| 1984 | George Orwell | Secker and Warburg | 1949-06-08 |