CODEWITHSUNDEEP
pythondjango
Developer
Developer

Reputation: 6350

How to render json data in Python Django App

I am new to Python . I am trying to create a webapp from Django which will read data from Excel file and then it will show that data on webpage in a form of dropdown .

This is the structure of my web app which is I am creating App Structure

I have also created a python script which is parsing the excel data and returning the json data

import pandas
import json

# Read excel document
excel_data_df = pandas.read_excel('Test-Data.xlsx', sheet_name='Sheet1')

# Convert excel to string
# (define orientation of document in this case from up to down)
thisisjson = excel_data_df.to_json(orient='records')

# Print out the result
print('Excel Sheet to JSON:\n', thisisjson)
thisisjson_dict = json.loads(thisisjson)

with open('data.json', 'w') as json_file:
    json.dump(thisisjson_dict, json_file)

This is output of this script

[{"Name":"Jan","Month":1},{"Name":"Feb","Month":2},{"Name":"March","Month":3},{"Name":"April","Month":4},{"Name":"May","Month":5},{"Name":"June","Month":6},{"Name":"July","Month":7},{"Name":"August","Month":8},{"Name":"Sep","Month":9},{"Name":"October","Month":10},{"Name":"November","Month":11},{"Name":"December","Month":12}]

This is what I am to have on html

<!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="">
  <label for="months">Choose a Month:</label>
  <select name="months" id="month">
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">March</option>
    <option value="4">April</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Now where I am stuck is how we can integrate this in my webapp and how we can use this Json data to create a dropdown list on my webpage.

Upvotes: 0

Views: 999

Answers (3)

Ahmet Deger
Ahmet Deger

Reputation: 71

You need to do following 3 steps.

  1. Write a view function to see your Excel data in your HTML.
  2. Add your view function in your urls.py file.
  3. Create a loop in your HTML to see your months_data.

1. my_website/views.py

from django.http import Http404
from django.shortcuts import render

def get_months(request):
    months_data = your_json
    return render(request, 'your_html_path', {'months': months_data})

2. my_website/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.get_months),
]

3. home.html

<!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="">
  <label for="months">Choose a Month:</label>
  <select name="months" id="month">

    {% for month in months %}
        <option value={{ month.Month }}>{{ month.Name }}</option>
    {% endfor %}

  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Also, you can look for more information about views Writing views | Django documentation

and you can look for more information about urls URL dispatcher | Django documentation

I hope it works for you!

Upvotes: 2

irvoma
irvoma

Reputation: 137

I'm not sure if you're using function or class based view, but pass your data in the context

...
context['months'] = [{"Name":"Jan","Month":1}, ...]
...

Then in the template iterate over it

...
{% for item in months %}
  <select name="months" id="month">
    <option value="{{ item.Month }}">{{ item.Name }}</option>
  </select>
{% endfor %}
...

Upvotes: 0

saro
saro

Reputation: 821

Why dump to json? Use pyexcel its easy to understand the docs. link docs

Another option is to use ajax, you can implement the excel output (json Response) in a simple way in your template. If you dont want to use pyexcel (which is in most cases sufficient) let me know, then we can get into an ajax example.

Upvotes: 0

Related Questions