Get the full course at https://www.udemy.com/course/ajax-javascript-json/
Make an AJAX request to local JSON file
You must use the http protocol to do an AJAX request to the json file.
Suggested editor is https://code.visualstudio.com/
Set up Local server within Visual Studio Code Use of live server is https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Do not use the file: protocol to make AJAX requests with JavaScript!
file:// is a request for a local file.
http:// is using HTTP protocol to request a file from the web or from your local computer.
Files requested via file:// get opened from local drive. A file requested via http:// get opened via HTTP request to the URL that comes after it.
http:// is running the same file that did not work in the file protocol. The local host will include the local IP address http://127.0.0.1:5500/index.html or the http://localhost:5500/index.html are both valid paths to the local server running.
In visual studio code right click in the open space or run the live server from the shortcut once it’s installed.
Open the live server on the html file, your workspace will need an index file which will be the default location where the local host opens.
If you see the file: in the URL bar you need to set up a local host to make AJAX requests.
Exercise :
- Create a JSON file with objects contained in an array.
- Create an HTML file with a button that will be made clickable and an element where you can output content into.
- In the JavaScript file, select the page elements
- Select the path to the JSON file as a variable named url.
- Add an event listener to the button click , making a fetch request to the url.
- Once a response is received from the JSON file, return it as JSON into a JavaScript object with json()
- Create a function named addData() that will loop through an array of results, and create a string value of HTML code to output on the page, containing the property values from the objects in the JSON file array.
HTML
<!DOCTYPE html>
<html><head><title>JavaScript Course</title></head>
<body>
<div class=”container”></div>
<button id=”btn”>Start</button>
<script src=”js1.js”></script>
</body></html>
JavaScript
const btn = document.querySelector(‘#btn’);
const output = document.querySelector(‘.container’);
const url = ‘temp1.json’;
//console.log(btn);
btn.onclick = ()=>{
//console.log(‘clicked’);
fetch(url)
.then(res => res.json())
.then(data => {
addData(data);
})
}
function addData(data){
let html = ‘<h1>Results</h1>’;
data.forEach(person=>{
console.log(person);
html += `<div>${person.first} ${person.last} (${person.id})</div>`;
})
output.innerHTML = html;
}
JSON
[
{
“first” : “Laurence”,
“last” : “Svekis”,
“id” : 100
},
{
“first” : “Adam”,
“last” : “Jones”,
“id” : 44
},
{
“first” : “Jane”,
“last” : “Doe”,
“id” : 25
}
]