onlyforbopi
9/27/2018 - 7:27 AM

JS.JSON.Getting remote JSON data with the XhR2 API

JS.JSON.Getting remote JSON data with the XhR2 API

table {
  margin-top: 20px;
}
table, tr, td {
  border: 1px solid;
} 
  function search() {    
    var queryURL = "https://jsonplaceholder.typicode.com/users";
    
    var xhr = new XMLHttpRequest();
    xhr.open('GET', queryURL, true);

    // called when the response is arrived
    xhr.onload = function(e) {
      var jsonResponse = xhr.response;

      // turn the response into a JavaScript object
      var users = JSON.parse(jsonResponse);
      displayUsersAsATable(users);
    }
    
    // in case of error
    xhr.onerror = function(err) {
      console.log("Error: " + err);
    }
    
    // sends the request
    xhr.send();
} 
  
function displayUsersAsATable(users) {
    // users is a JavaScript object
  
    // empty the div that contains the results
    var usersDiv = document.querySelector("#users");
    usersDiv.innerHTML = "";
  
    // creates and populate the table with users
    var table = document.createElement("table");
          
    // iterate on the array of users
    users.forEach(function(currentUser) {
        // creates a row
        var row = table.insertRow();
        // insert cells in the row
        var nameCell = row.insertCell();
        nameCell.innerHTML = currentUser.name;
        var cityCell = row.insertCell();
        cityCell.innerHTML = currentUser.address.city;
     });
  
     // adds the table to the div
     usersDiv.appendChild(table);
}

JS.JSON.Getting remote JSON data with the XhR2 API

A Pen by Pan Doul on CodePen.

License.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Working with remote data suing XhR2</title>
  <meta charset="utf-8"/>
</head>
<body>
  <p>Working with remote data suing XhR2</p>
  <button onclick="search();">Get a remote list of users' names and emails</button>
  <div id="users"></div>
</body>
</html>