Van icon

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"
    }
    ]