AJAX Local JSON
Links
//Files: Ajax 2 -Local JSON ajax2; user.json, users.json
<button id="button1">Get User</button>
<button id="button2">Get UserS</button>
<br><br>
<h2>User</h2>
<div id="user"></div>
<h2>Users</h2>
<div id="users"></div>
//AJAX js
document.getElementById('button1').addEventListener('click', loadUser);
document.getElementById('button2').addEventListener('click', loadUsers);
function loadUser(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'user.json', true);
xhr.onload = function(){
if(this.status == 200){
console.log(this.responseText);
var user = JSON.parse(this.responseText);
console.log(user.name);
var output = '';
output +=
'<ul>' + '<li>ID: '+user.id+' </li>'
+'<li>Name: '+user.name+' </li>' +
'<li>email: '+user.email+' </li>' +'</ul>';
document.getElementById('user').innerHTML = output;
}
}
xhr.send();
}
function loadUsers(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'users.json', true);
xhr.onload = function(){
if(this.status == 200){
console.log(this.responseText);
var users = JSON.parse(this.responseText);
// console.log(user.name);
var output = '';
for(var i in users){
output +=
'<ul>' + '<li>ID: '+users[i].id+' </li>'
+'<li>Name: '+users[i].name+' </li>' +
'<li>email: '+users[i].email+' </li>' +'</ul>';
}
document.getElementById('users').innerHTML = output;
}
}
xhr.send();
}
//user.json
{
"id":1,
"name": "Rick",
"email": "rick@gmail.com"
}
//users.json
[
{
"id":1,
"name": "Rick",
"email": "rick@gmail.com"
},
{
"id":2,
"name": "Glenn",
"email": "glenn@gmail.com"
},
{
"id":3,
"name": "Megan",
"email": "megan@gmail.com"
}
]