Показать текст из файла Json в шаблоне Django

Я начинаю изучать django, я создал несколько базовых шаблонов / представлений и хочу отобразить текст из файла json, расположенного в папке assets/jsons.Файл называется "quotes.json". Содержимое файла json:

{
  "emp_details": [
    {
      "emp_name": "johnny",
      "email": "example1.mail@gmail.com",
      "job_profile": "intern"
    },
    {
      "emp_name": "gustav",
      "email": "gustav.empl@gmail.com",
      "job_profile": "developer"
    },
    {
      "emp_name": "emily",
      "email": "emily@gmail.com",
      "job_profile": "Full Time"
    }
  ]
}

вот этот views.py :

from django.http import HttpResponse
from django.shortcuts import render


from django.contrib.auth import get_user_model


#from . import models

def homepage(request):
    ##here is where I want to have the json data
    ##and return it in the render along with the request and 'homepage.html'

    return render(request,'homepage.html')

def about(request):
    return render(request,'about.html')

def users(request):

    User = get_user_model()
    users = User.objects.all()


    return render(request,'users.html',{'users':users})

здесь есть homepage.html , в layout.html есть css и некоторые кнопки навигации, но это не имеет значения. Я буквально хочу, чтобы содержимое json отображалось только в виде текста на главной странице.

{% extends 'layout.html' %}




{% block title %}
    Home
{% endblock %}


{% block content %}


{% load static %}







{% load static %}
<script type="text/javascript">

        console.log(json1_data);
    </script>


    <h1>Home</h1>

    <h1><p>Welcome {{request.user}}</p></h1>





    <p>Check out my <a href="/about">About</a> page.</p>


    <p  id="demo"> </p>






{% endblock %}

Я попытался импортировать файл с помощью basic python, но особого успеха не добился

Один из способов сделать это - записать логику в свои представления для чтения файла и десериализации его с помощью json.load, затем передать контекст шаблону, который будет отображен:

from django.shortcuts import render
import json


def homepage(request):
    with open('assets/jsons/quotes.json') as json_file:
        data = json.load(json_file)
    return render(request, 'homepage.html', {'data': data})

Затем в вашем шаблоне homepage.html:

{% block content %}

{% for item in data.emp_details %}
<section>
<p><strong>{{ item.emp_name }}</strong></p>
<p>{{ item.email }}</p>
<p>{{ item.job_profile }}</p>
</section>
{% endfor %}

{% endblock content %}

И, наконец, ваш urls.py:

from django.urls import path

from . import views


urlpatterns = [
    path('', views.homepage, name='home'),
  
]

Это вернет значение:


johnny

example1.mail@gmail.com

intern


gustav

gustav.empl@gmail.com

developer


emily

emily@gmail.com

Full Time

Я думаю, что причина, по которой вы не сохраняете файл в базе данных, заключается в том, что вы выбираете файл в браузере и отображаете его данные на странице или, возможно, отправляете их в серверную часть. Для этого вам нужно написать код javascript, как показано ниже. вам нужно изменить его для отправки данных в серверную часть.

{% extends 'layout.html' %}
{% block title %}
    Home
{% endblock %}
{% block content %}
{% load static %}
<h1>Home</h1>

<div>
    <label for="jsonFile">Select JSON file:</label>
    <input type="file" id="jsonFile" accept=".json" />
    <button onclick="loadJsonFile()">Load File</button>
</div>

<div id="jsonContent">
</div>

<p>Check out my <a href="/about">About</a> page.</p>

<p  id="demo"> </p>

<script>
function loadJsonFile() {
    const fileInput = document.getElementById('jsonFile');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('Please select a file!');
        return;
    }
    
    const reader = new FileReader();
    
    reader.onload = function(e) {
        try {
            const jsonData = JSON.parse(e.target.result);
            displayJsonData(jsonData);
        } catch (error) {
            alert('JSON file could not be parsed');
        }
    };
    
    reader.readAsText(file);
}

function displayJsonData(jsonData) {
    const contentDiv = document.getElementById('jsonContent');
    
    if (jsonData.emp_details && Array.isArray(jsonData.emp_details)) {
        let html = ''; 
        jsonData.emp_details.forEach((employee, index) => {
            html += `
                <div">
                <p><strong>Name:</strong> ${employee.emp_name}</p>
                <p><strong>Email:</strong> ${employee.email}</p>
                <p><strong>Position:</strong> ${employee.job_profile}</p>
                </div>
            `;
        });
        
        contentDiv.innerHTML = html;
    } else {
        contentDiv.innerHTML = '<p>JSON format is not as expected.</p>';
    }
}
</script>
{% endblock %}
Вернуться на верх