Невозможно получить Json-файл с помощью javascript в Django

У меня есть json файл, который я хотел бы получить в javascript и создать для него div'ы на веб-странице.

Моя проблема в том, что я указываю локальный путь к json-файлу в методе fetch, но он добавляет его в url веб-страницы django.

Код ниже пытается получить локальный путь к json-файлу:

fetch('../../scrapers/jsonOutputs/linkedin_jobs.json')
.then(response => response.json())
.then(data => {
  const jobListings = data.Jobs;
  jobListings.forEach(job => {
    const jobTitle = job["Job Title:"];
    const employerName = job["Employer name: "];
    const jobLocation = job["Job Location: "];
    const jobDetails = job["Job Details: "];
    const linkToJob = job["Link To Job: "];
    const jobListingElement = document.createElement("div");
    jobListingElement.classList.add("job-listing");
    jobListingElement.innerHTML = `
      <h2>${jobTitle}</h2>
      <p>${employerName}</p>
      <p>${jobLocation}</p>
      <div class="job-description-container">
        <div class="job-description">
          <p>${jobDetails}</p>
          <a href="${linkToJob}">View Job</a>
        </div>
      </div>
    `;
    const jobListContainer = document.getElementById("job-list-container");
    jobListContainer.appendChild(jobListingElement);
  });
});

Теперь, когда я запускаю django webapp и осматриваю элемент веб-страницы, я получаю следующую ошибку

  • [Ошибка] Не удалось загрузить ресурс: сервер ответил статусом 404 (Not Found) (linkedin_jobs.json, строка 0)

  • [Error] Unhandled Promise Rejection: SyntaxError: Строка не соответствует ожидаемому шаблону. promiseEmptyOnRejected (jobsearch-func.js:4) promiseReactionJob

Элемент inspect показывает

http://127.0.0.1:8000/scrapers/jsonOutputs/linkedin_jobs.json

что проблематично, поскольку это не путь к моему json файлу, а путь к папке проекта.

Как я могу прочитать json файл в javascript и создать divs?

Код для запуска моего javascript на моей html-странице:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2 id="job-list-heading">Job Listings</h2>
     <div id="job-list-container">
    </div>
    <script src={% static 'js/jobsearch-func.js' %}></script>
</body>
</html>
Вернуться на верх