I have a json file that I would like to fetch in javascript and create divs for it in the webpage.
My issue is that I am providing local path of the json file to the fetch method but it is adding it to the django webpage url.
The code below tries to fetch the local path of json file:
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);
});
});
Now when I run the django webapp and inspect element the webpage, I get the following error
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (linkedin_jobs.json, line 0)
[Error] Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern. promiseEmptyOnRejected (jobsearch-func.js:4) promiseReactionJob
The inspect element shows
http://127.0.0.1:8000/scrapers/jsonOutputs/linkedin_jobs.json
which is problematic since this is not the path to my json file but instead its in my project folder.
How can I read the json file in javascript and create divs?
The code for running my javascript in my html page:
{% 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>
